SVG多边形，点坐标为百分比[重复]

Question

这个问题在这里已有答案：

• 具有百分比单位的SVG多边形点支持 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抱怨道

错误：属性点：预期数字，“20％，10％10％，90％80 ......”。

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

Answer 1

SVG坐标系由SVG的viewbox定义。

将您的视图框定义为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>