SVG视口、矩形和多段线

SVG属性

viewBox

似乎不一致。它似乎不能以相同的方式缩放所有SVG图形原语。下面是一个示例SVG文件，它有一个矩形、一个

圆、一条
多段线和一个
多边形。矩形已正确缩放并几乎填满视口（视口的
宽度
为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>



简短回答：

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


说明：

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

SVG
视口尺寸设置为501乘499（
width
by
height
）
viewBox
属性设置为
100表示
min-x
和
min-y
，其作用类似于将视口的位置移动到其容器顶部和左侧位置之前（这在图像中似乎不相关，因为还将所有坐标移动了100；请参见下面的注释）

200表示
宽度
和
高度
，表示100%的视口大小（在本例中~
500px
）；换句话说，任何子项中的200值都将映射（缩放）到~
500px

rect
有193个as
width
和
height
，将近200个，这使得它几乎占据了~
500px×500px的所有视口区域

其他项目的比例适当，但它们看起来更小，因为它们实际上更小
e、 g.
圆
具有
r='50'
，该圆适合于100乘100的假想外方；100是200的50%，因此它按250像素的比例缩放到250像素（250=500的50%）；这就是为什么圆圈似乎使用了面积的1/4
同样的想法也适用于其他图形元素


注:

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



也许您可以解释一下，为什么半径为50的圆应该填充宽度和高度为200的视口框？这与193 x 193矩形填充500 x 500视口的原因相同。以下是我的理解（如果我错了，请纠正）。viewBox的内容始终缩放以填充视图端口。矩形几乎为200宽，因为193离200不远。圆的宽度为100，半径为50=直径为100。100不是一个接近200的数字。是的，200 x 200的viewBox大小可以缩放以填充501 x 499的视图端口。这意味着200个用户单位宽的东西变成了501px宽。越小的东西越小，越大的东西越大。