SVG 视图框、矩形和折线答案

【问题标题】：SVG viewBox, rectangle, and polylineSVG 视图框、矩形和折线
【发布时间】：2017-11-07 21:39:21
【问题描述】：

SVG 属性viewBox似乎不一致。似乎它不会以相同的方式缩放所有 SVG 图形基元。这是一个示例 SVG 文件，其中包含一个矩形、一个circle、一个polyline 和一个polygon。矩形已正确缩放并几乎填满了视口（@987654327@ 为 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>

【问题讨论】：

也许你可以解释一下为什么你认为半径为 50 的圆应该填充宽度和高度为 200 的 viewBox？
193 x 193 矩形填充 500 x 500 视口的原因相同。这是我的理解（如果我错了，请纠正）。 viewBox 的内容总是缩放以填满视口。
矩形的宽度接近 200，因为 193 距离 200 不远。圆的宽度为 100，半径为 50 = 直径为 100。 100 作为一个接近 200 的数字并不广为人知。
是的，200 x 200 的 viewBox 尺寸会缩放以填充 501 x 499 的视口。这意味着 200 个用户单位宽的东西变成 501px 宽。小东西变小，大东西变大。

标签： svg viewport scaling viewbox

【解决方案1】：

简答：

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

解释：

查看viewBox 文档有助于更好地理解计算。让我们尝试一步一步地查看示例代码：

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>

【讨论】：