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

Question

我正在尝试拥有一个可以轻松调整大小的流体 SVG Canvas 。到目前为止，我到处都在使用百分比。然而它看起来像 SVG polygon和path s 不支持 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> 调整大小的多边形。元素。

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 缩放。