javascript - SVG 标签的复杂参数（类似于 CSS 的 calc()）

你能告诉我svg标签是否可以设置复杂参数吗？

对于 CSS，有 calc() 命令，例如：

width: calc (50% - 10px);

有类似这样的 SVG 吗，例如：

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

?

答案＃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>