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

Question

我正在尝试使用流畅的SVG画布,可以轻松调整大小.到目前为止,我到处都在使用百分比.但是,似乎SVG polygon和paths不支持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一起缩放.