支持百分比单位的SVG多边形点 [英] SVG polygon points with percentage units support
问题描述
我正在尝试使用可以轻松调整大小的流畅SVG画布.到目前为止,我到处都在使用百分比.但是,似乎SVG polygon
和path
在point
属性中不支持百分比.这是一个示例:
I am trying to have a fluid SVG canvas that can resize easily. So far I'm using percentages everywhere. However it seems like SVG polygon
and path
s do not support percentages in point
attribute. Here's an example:
<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>
元素调整大小的多边形的方法.
However if I start to change numbers in points
attribute to percentages it fails with parsing error in console. I am looking for a way to have the polygon that can resize with the <svg>
element.
推荐答案
通过使用viewBox和一个容器元素(任何大小),我认为您可以达到所需的效果:http://jsfiddle.net/davegaeddert/WpeH4/
By using viewBox and a container element (of whatever size) I think you can achieve the effect you're looking for: 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缩放.
If you give the viewBox a size of 0 0 100 100
then the points can be written like percentages and the shape will scale with the svg.
这篇关于支持百分比单位的SVG多边形点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!