Question

SVG属性viewBox 出现以使其不一致。似乎它不会以相同的方式缩放所有SVG图形基元。这是一个SVG文件示例，它包含一个矩形，一个圆，一条折线和一个多边形。矩形已正确缩放，几乎填充了viewPort（宽度为500，高度为500）。

请参阅下面生成的SVG代码和图像。您会注意到折线，多边形和圆圈没有缩放以填充视口。它们（始终）占据了视口左上角的四分之一（移动但保留了原始大小）。任何人都可以对这是怎么回事吗？我将非常感谢您的反馈。

<?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文档以更好地理解计算非常有用。让我们尝试逐步完成示例代码：

通过{em> 499 将SVG视口尺寸设置为 501 （由width设置为{{11}}）
height属性设置为
1. 100 分别用于viewBox和min-x，这就像将视口的位置移到其容器的顶部和左侧位置之前（在图像中似乎无关紧要），因为您也将所有坐标都移动了 100 ； 请参阅下面的注释）
2. 200 ，这将代表视口大小的100％（在本例中为〜height）；换句话说，任何子项中的200值都将映射（缩放）到〜500px
500px的 193 为rect和width，几乎为 200 ，这使得它几乎占据了所有〜height视口区域
其他项目的缩放比例适当，但是它们似乎较小，因为实际上它们较小
1. 例如500px by 500px的{{1}}可以满足 100 x 100 的假想外部平方； 100是200的50％，因此将其缩放到〜250px x〜250px（250 = 500的50％）；这就是为什么圆似乎占用面积的1/4的原因
2. 相同的想法也应用于其他图形元素。

注意：

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

min-x

SVG viewBox，矩形和折线

1 个答案: