svg viewBox 奇怪的行为？答案

【问题标题】：svg viewBox strange behavior?svg viewBox 奇怪的行为？
【发布时间】：2019-05-06 07:08:48
【问题描述】：

我试图弄清楚 svg viewBox 是如何工作的，但下面的代码破坏了所有逻辑。

<svg width="100" height="100" viewBox="0 0 1 20">
    <circle cx="10" cy="10" r="10" fill="red"/>
</svg>

在我的现实中，viewBox 用于定义要在视口中显示的 svg 画布区域。这段代码的结果应该是最左边的小圆是水平居中的，两边都有空白，但是chrome和firefox都不遵循这个逻辑。有人能解释一下这是如何工作的吗？对不起我的英语，我希望你不明白我想说什么。

【问题讨论】：

请将其更改为：<svg width="100" height="100" viewBox="0 0 1 20" preserveAspectRatio="xMaxYMax meet"> <circle cx="10" cy="10" r="10" fill="red"/> </svg> 这是您需要的吗？ preserveAspectRatio
它只是没有按预期工作的问题。默认值为“xMidYMid meet”，考虑到我的代码，它应该水平居中最左边的一个圆圈，但它的行为是完全错误的。我只想知道为什么它显示了一半的圆圈。发生了什么
圆圈宽 20 个用户单位。视图框仅显示画布的第一个单元。它不能像 Chrome 和 Firefox 那样显示一半的圆圈。它的疯狂

标签： svg viewbox

【解决方案1】：

这里的问题是，大部分圆圈都在 viewBox 之外（它只有 1 个单位宽，圆圈是 20 个单位宽），并且 viewBox 的纵横比与其容器的纵横比不同。

preserveAspectRatio 的默认设置是保持纵横比而不是扭曲形状，因此我们仍然需要绘制圆形而不是椭圆。由于绘图区域是方形的，因此圆形将绘制到该方形区域中，并且由于 viewBox 的高度为 20，我们将有一个 20 x 20 的区域来绘制一个圆形。

那么我们如何处理 1 个单位的 viewBox 宽度呢？我们如何将 0-1 映射到 20 个单位？我们需要保持 viewBox 的中间值为 0.5。

我们需要为 x 和 y 求解这些方程：(x + y) / 2 = 0.5（保持中心相同）和 y - x = 20（保持宽度与高度相同以保持纵横比比率）

在这里做数学运算：x + y = 1 -> y - (1 - y) = 20 -> 2y - 1 = 20 -> y = 10.5 和 x = -9.5。

所以我们将显示 0 - 20 的高度和 -9.5 - 10.5 的宽度，这意味着您将看到大致（但不完全）半个圆。您实际上看到了略多于一半的圆圈。

【讨论】：

比 viewbox 必须缩放 5px 宽 100px 高。我哪里错了？无法理解你的评论。看不到任何逻辑
不，那将是 preserveAspectRatio="none"。请参阅我的回答中的第 2 段。
对不起，我的大脑正在融化，我无法理解这个 viewBox 发生了什么。我通过规范和我阅读的所有解释添加了它应该做什么的图片。用逻辑来理解发生了什么是不可能的，因为其中没有逻辑。
Firefox 和 Chrome 的开发人员分别阅读了规范，实现了它并想出了相同的东西，所以显然有逻辑，它确实有道理，而且我已经清楚地解释了它是如何与适当的数学一起工作的。您需要重新阅读我的答案的后半部分。
你的解释根本没有帮助。我从来没有这么难理解某事。我以为我明白什么是 viewBox，它是一块画布，不是吗？使用 viewBox，您可以定义要在 viewPort 中显示的画布部分。你能解释一下吗，我已经在这个 viewBox 上浪费了 3 天，但仍然一无所获。

【解决方案2】：

浏览器正在正确呈现您的 SVG。

viewBox 只定义了应该缩放以适应视口的区域。内容未剪辑到 viewBox。如果 viewBox 之外有元素，但仍在视口内，那么这些元素将是可见的。

在您的情况下，您已要求浏览器在视口中将圆的最左边缘居中。但是有足够的空间让圆圈的其余部分可见。

svg {
  background-color: linen;
}

<svg width="100" height="100" viewBox="0 0 1 20">
    <circle cx="10" cy="10" r="10" fill="red"/>
    <rect width="1" height="20" fill="none" stroke="black" stroke-width="0.3" stroke-dasharray="0.5 0.5"/>
</svg>

【讨论】：