我正在尝试一个可以轻松调整大小的流畅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>
元素。
通过使用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而缩放。
您可以将元素与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>