html - 点坐标百分比的 SVG 多边形

<分区>

我可以在 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…".

有什么方法可以用百分比坐标绘制填充多边形吗？

最佳答案

SVG 坐标系由 SVG 的 viewbox 定义。

将您的 View 框定义为 0 0 100 100 并将百分比转换为基于该 View 框的数字。

然后 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>

关于html - 点坐标百分比的 SVG 多边形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39001361/

上一篇：html - 段落两侧的对 Angular 虚线图案

下一篇：html - 使我隐藏的单选按钮可制表/508 兼容

相关文章：

javascript - Chrome 扩展 - 如何将值传递到后台页面

Javascript:按div内的内容对链接进行排序

css - AngularJS 中的弹出窗口和表单中的相对位置

c# - 在所有网页上使用相同的页眉和页脚

css - 试图并排放置 DIV，但它不起作用

svg - 如果容器为 display flex，为什么 SVG 宽度为 0？

jquery - 使用 jQuery 悬停另一个元素时动画元素背景图像

javascript - 使用 JavaScript 计算税金

java - 使用 java 和 svg 的每日股市图表

javascript - svg 拖动目标是整个 <object> 而不是鼠标处理程序？