点坐标百分比的 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抱怨

Error: attribute points: Expected number, "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 多边形

SVG polygon with point coordinates in percent

html

css

svg

polygon