支持百分比单位的 SVG 多边形点 [英] SVG polygon points with percentage units support
问题描述
我正在尝试使用可轻松调整大小的流畅 SVG 画布.到目前为止,我到处都在使用百分比.然而,SVG polygon
和 path
似乎不支持 point
属性中的百分比.举个例子:
但是,如果我开始将 points
属性中的数字更改为百分比,它会失败并在控制台中出现解析错误.我正在寻找一种可以使用 元素调整多边形大小的方法.
通过使用 viewBox 和容器元素(无论大小),我认为您可以实现您正在寻找的效果:http://jsfiddle.net/davegaeddert/WpeH4/
<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%'/><多边形点="0,0 0,100 30,20 30,0"/><多边形点="30,0 30,20 60,0 60,0"/><polygon points="60,0 60,0 90,30 90,0"/></svg>
如果你给 viewBox 一个 0 0 100 100
的大小,那么点可以写成百分比,形状会随着 svg 缩放.
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>
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.
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>
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屋!