javascript - svg 标签的复杂参数(css 的模拟 calc())

Question

请问svg标签是否可以设置复杂的参数？

对于css，有calc()命令，例如:

width: calc (50% - 10px);

svg有没有类似的东西，比如:

<circle r = 'calc (50% - 2px)'>

?

Answer 1

简短的回答是“不”。或者至少目前不是以跨浏览器的方式。

但是在 SVG2 标准(浏览器仍在实现)中，几何属性，例如 r，可以使用 CSS 设置样式。

Chrome 已实现此功能，但(据我所知)它是唯一的一个。因此，以下示例将在 Chrome 中运行，但(目前)还不能在其他浏览器中运行。

svg {
  background-color: linen;
}

<svg width="200" height="200">
  <circle cx="100" cy="100" style="r: calc(50% - 10px);" fill="red"/>
</svg>