SVG多边形,点坐标为百分比

Question

我可以在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坐标系由viewboxSVG 定义.

将viewbox定义为say,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>