SVG viewBox、矩形和折线

Question

SVG 属性viewBox似乎不一致。似乎它不会以相同的方式缩放所有 SVG 图形基元。这是一个示例 SVG 文件，其中包含一个矩形、一个 circle、一个 polyline 和一个 polygon。该矩形已适当缩放并几乎填满视口（width 为 500，height 为 500）。

请查看下面生成的 SVG 代码和图像。您会注意到 polyline、polygon 和 circle 没有缩放以填充视口。尽管它们确实（始终）占据了视口的左上四分之一（移动但保留了原始大小）。谁能解释一下这是怎么回事？我将非常感谢您的反馈。

<?xml version='1.0' encoding='utf-8'?>
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' 
    xmlns:xlink='http://www.w3.org/1999/xlink'
    height='499' width='501' viewBox='100 100 200 200'>
    <g stroke='BLACK' stroke-width='5' fill='none'>
        <rect x='105' y='105' width='193' height='193'/>
        <polygon points="150,100 200,200 100,200" style="stroke:purple" />
        <polyline points='115,180 155,127 180,180' stroke='red'/>
        <circle cx='150' cy='150' r='50' stroke='green'/>
    </g>
</svg>

Answer 1

简答：

示例代码中的 SVG 属性 viewBox 确实以相同的方式缩放所有 SVG 图形；所以较小的对象表示 实际上是较小的对象 .

解释：

查看 viewBox 文档有助于更好地理解计算。让我们尝试通过您的示例代码 step-by-step:

SVG 视口尺寸由 499 设置为 501（width 由 height)
viewBox 属性设置为
1. 100 对于 min-x 和 min-y，这就像在其容器顶部和左侧位置之前移动视口的位置（在图片似乎无关紧要，因为您还将所有坐标移动了 100；请参阅下面的注释 )
2. 200 对于 width 和 height，这将代表 100% 的视口大小（在本例中为 ~500px）；换句话说，任何子项中的 200 值将被映射（缩放）到 ~500px
rect 有 193 作为 width 和 height，这接近 200 , 这使得它占据了几乎所有的 ~500px by 500px 视口区域
其他项目已适当缩放，但它们 看起来更小 因为，事实上，它们更小
1. 例如circle 有 r='50'，它适合 100 x 100 的假想外正方形； 100 是 200 的 50%，所以它按 ~250px 缩放到 ~250px（250 = 500 的 50%）；这就是为什么圆圈似乎使用了面积的 1/4
2. 同样的想法也适用于其他图形元素。

注意：

我发现如果视口和定位坐标上没有偏移，则更容易理解最终结果。因此，从 viewBox > min-x 和 min-y（上面的步骤 2.1）和所有定位属性中删除 100 将使这段代码更容易理解：

<?xml version='1.0' encoding='utf-8'?>
    <svg version='1.1' xmlns='http://www.w3.org/2000/svg' 
        xmlns:xlink='http://www.w3.org/1999/xlink'
        height='499' width='501' viewBox='0 0 200 200'>
        <g stroke='BLACK' stroke-width='5' fill='none'>
            <rect x='5' y='5' width='193' height='193'/>
            <polygon points="50,0 100,100 0,100" style="stroke:purple" />
            <polyline points='15,80 55,27 80,80' stroke='red'/>
            <circle cx='50' cy='50' r='50' stroke='green'/>
        </g>
    </svg>

SVG viewBox、矩形和折线

SVG viewBox, rectangle, and polyline

scaling

svg

viewport

viewbox