svg viewBox异常行为？

Question

我试图弄清楚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也不遵循这种逻辑。有人可以解释它的工作原理吗？对不起我的英语，我希望你不理解我想说的话。

Answer 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的宽度，这意味着您将大致看到（但不太清楚）半个圆圈。实际上，您看到的圆略多于一半。

Answer 2

浏览器正确渲染了SVG。

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>