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>