html – 点坐标为百分比的SVG多边形

概述参见英文答案 > SVG polygon points with percentage units support                                    2个 我可以在svg中使用矩形坐标中的百分比值,但不能在多边形中使用百分比值.有解决方法吗？ 我的意思是,这没关系： svg { background: #ADF; width: 300px; heig 参见英文答案 > SVG polygon points with percentage units support                                    2个
我可以在svg中使用矩形坐标中的百分比值,但不能在多边形中使用百分比值.有解决方法吗？

我的意思是,这没关系：

svg {  background: #ADF;  wIDth: 300px;  height: 300px}rect {  stroke: black;  fill: #8FF;}

<svg>  <rect x="10%" y="10%" wIDth="80%" height="70%"/></svg>

但这不起作用：

svg {  background: #ADF;  wIDth: 300px;  height: 300px}polygon {  stroke: black;  fill: #8FF;}

<svg>  <polygon points="20%,10% 10%,90% 80%,90%"/></svg>

Chrome抱怨道

Error: attribute points: Expected number,“20%,90%
80…”.

有没有办法可以用百分比坐标绘制填充多边形？

解决方法 SVG坐标系由SVG的视图框定义.

将您的视图框定义为0 0 100 100,并根据该视图框将百分点转换为数字.

然后SVG将自动缩放.

如果你想避免笔划缩放……那里也有一个CSS属性！

svg {  background: #ADF;  wIDth: 250px;  height: 250px}polygon {  stroke: black;  stroke-wIDth:1;  fill: #8FF;  vector-effect: non-scaling-stroke;}

<svg vIEwBox=" 0 0 100 100">  <polygon points="20,10 10,90 80,90" /></svg>

总结

以上是内存溢出为你收集整理的html – 点坐标为百分比的SVG多边形全部内容，希望文章能够帮你解决html – 点坐标为百分比的SVG多边形所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。