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

Question

我正在尝试创建一个可以轻松调整大小的流体 SVG 画布。目前，我在所有地方都使用百分比。但是似乎 SVG 中的 polygon 和 path 不支持 point 属性中的百分比。这里有一个示例：

(jsFiddle)

<svg width='90%' height='90%' 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>

然而，如果我开始将points属性中的数字更改为百分比，则会在控制台中出现解析错误。我正在寻找一种方法，使多边形能够随着<svg>元素调整大小。

- ahmet alp balkan

---

可能是如何使用em缩放SVG多边形？的重复问题。 - Robert Longson

Answer 1

使用viewBox和一个容器元素（无论大小如何），我认为您可以实现所需的效果：http://jsfiddle.net/davegaeddert/WpeH4/

<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>

如果你给viewBox设置一个大小为0 0 100 100，那么点可以用百分比来表示，该形状将与svg一起缩放。

- davegaeddert

---

好的，但不幸的是，线条的大小（stroke-width）也会被拉伸。 - FlorianB

属性 vector-effect="non-scaling-stroke" 可以解决这个问题。 - Aaron Cicali

很好，但它保持正方形了，是吗？ 如果想要全屏显示（大多数情况下带有水平比率），有解决办法吗？ - alan_langlois

@alan_langlois 我觉得这并不局限于正方形 - 尝试在jsfiddle示例中更改#svg-container的宽度和高度（即＃svg-container {width：400px; height：100px;}）... - davegaeddert

这对我非常有效，能够响应式地缩小现有的SVG。谢谢！不过需要注意的一点是，为了正确维护SVG的大小，我必须在svg元素上使用display:block;。 - Travis J

vector-effect="non-scaling-stroke"可以应用于<g>标签或其他父级标签吗？我无法使其在未直接应用于<path>的情况下生效，而且由于有很多路径，这可能会很麻烦。 - Magnus Bull

Answer 2

你可以使用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>

- simonzack

---

那并没有帮助。最后，你将一个宽度为90像素的多边形组缩放到45个固定数字。我需要的是，一些随着“SVG”元素的大小调整而调整大小的东西。现在rect确实可以这样做，它没有任何固定的内容。如果我有一个三角形和polygon，我该怎么做呢？试试制作<svg width =“10％”height =“10％”>，你会明白我的意思。 - ahmet alp balkan

你不能使用 viewBox 吗？它可以自动缩放所有内容。 - simonzack

好的，viewBox 已经解决了，现在我遇到了一个似乎是 d3.js 的 bug。谢谢！ - ahmet alp balkan

不知道你是否在 viewBox 中使用了百分比。我在修复我的 viewBox 后遇到了这个问题。如果它导致了 d3.js 错误，这里是我发现的内容链接：https://dev59.com/5YDba4cB1Zd3GeqPIMDW - someyoungideas