以百分比表示的点坐标的SVG多边形[重复]答案

【问题标题】：SVG polygon with point coordinates in percent [duplicate]以百分比表示的点坐标的SVG多边形[重复]
【发布时间】：2016-12-24 09:22:29
【问题描述】：

我可以在 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……”。

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

【问题讨论】：

我想将不缩放的像素值（例如 stroke-width="1"）与百分比值混合，但我只能对矩形进行此操作。

标签： html css svg polygon

【解决方案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>

【讨论】：