支持百分比单位的SVG多边形点

我试图有一个流体SVG画布，可以轻松调整大小。到目前为止，我到处都在使用百分比。但是，SVG

polygon

和

path

s似乎不支持

point

属性中的百分比。下面是一个例子：

---

但是，如果我开始将

points

属性中的数字更改为百分比，它将失败，并在控制台中出现解析错误。我正在寻找一种方法，使多边形可以使用

元素调整大小。

您可以将元素与

g

组合在一起，并使用变换：

<svg width='90%' height='90%' style='background-color: whitesmoke'>
    <rect x='40%' y='40%' width='25%' height='25%' />

    <g transform="scale(0.4 0.4)">
        <polygon points="0,0 0,100 30,20 30,0"/>
        <polygon points="30,0 30,20 60,0 60,0"/>
        <polygon points="60,0 60,0 90,30 90,0"/>
    </g>
</svg>

---

通过使用viewBox和容器元素（无论大小），我认为您可以实现想要的效果：

---

如果将viewBox的大小设置为

0 100 100

，则点可以像百分比一样写入，形状将随svg缩放。

这没有帮助。最后，将一个90像素宽的多边形组缩放为45像素的固定数字。我需要的是，使用

svg

元素调整大小。现在

rect

是这样做的，它没有固定的东西。假设我有一个三角形和

多边形

，我该怎么做呢？试试做

你就会明白我的意思。那你就不能用

查看框了吗？它可以自动缩放所有内容。好的
viewBox
有点像这样，我现在碰到了类似于
d3.js
bug的东西。谢谢不知道是否在视图框中使用百分比。在安装了viewBox之后，我遇到了这个问题。下面是一个链接，我发现它是否导致了d3.js错误。可能与Great重复，但不幸的是线条的大小（笔划宽度）也会被拉伸）@FlorianB-属性向量effect=“non-scaling stroke”应该可以解决这个问题。很好，但它保持了sqare的状态，对吗？当你想让它全屏显示（大多数时候是水平比例）时，有没有一个解决方案？这对我来说非常有效，能够响应地收缩现有的SVG。谢谢不过，需要注意的是，为了正确地保持svg的大小，我必须使用
display:blocksvg
元素上进行编码。是否可以将
vector effect=“non-scaling stroke”
应用于
标记或其他父项？如果不将它直接应用到
，并且有很多路径，我就无法让它工作，这可能会很烦人。
<svg width='90%' height='90%' style='background-color: whitesmoke'>
    <rect x='40%' y='40%' width='25%' height='25%' />

    <g transform="scale(0.4 0.4)">
        <polygon points="0,0 0,100 30,20 30,0"/>
        <polygon points="30,0 30,20 60,0 60,0"/>
        <polygon points="60,0 60,0 90,30 90,0"/>
    </g>
</svg>

<div id="svg-container" style="width:100%;height:100%;">
    <svg width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none" style='background-color: whitesmoke'>
        <rect x='40%' y='40%' width='25%' height='25%' />

        <polygon points="0,0 0,100 30,20 30,0" />
        <polygon points="30,0 30,20 60,0 60,0" />
        <polygon points="60,0 60,0 90,30 90,0" />
    </svg>
</div>