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坐标系由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>

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

1 个答案: