javascript - 哪些 SVG 属性可以使用 CSS(3) 进行操作？

Question

我刚刚完成了一个使用 Raphael.js 进行 svg 操作的元素。我发现将 JS 用于所有样式、悬停等操作会使 JavaScript 变得臃肿，并且没有按照我通常喜欢的方式将样式与代码分开。

然后我开始研究使用 JavaScript 绘制的纯 SVG 或直接使用 SVG 元素以及如何使用纯 CSS 来操作它们。

例如:

<svg id="circle-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" 
width="400" height="300">
    <circle id="my-circle" cx="100" cy="100" r="50" />
</svg>

可以这样设计:

circle {
  fill-opacity: 0.5;
  stroke-width: 4;
  fill: #3080d0;
  stroke: #3080d0;
  transition: fill 0.5s ease;
}
circle:hover{
  stroke-width:6;
  fill: #00f;
}

只是为了玩... Fiddle

到目前为止，我发现您可以操纵颜色、描边、不透明度，甚至可以在这些属性上设置 CSS3 过渡效果，但我无法在任何地方找到明确的列表或指南，例如“所有 SVG 属性，如 这可以通过SVG控制。

我很好奇，因为 Raphael 的第一个元素只是一个 POC，但很快我们将开始一个新元素，我们想要清理它的几个方面(例如将样式与 JS 混合) 并尽可能以“现代”方式进行。

是否有特定的列表或规则来定义哪些 SVG 属性和/或元素可以由 SVG 控制？此外，是否有任何注意事项，例如只能设置以特定方式创建的 svg 元素的样式，而其他...？

谢谢!

Answer 1

元素属性在SVG规范中分为CSS properties和 ordinary attributes .属性不能由 CSS 操作，但 CSS 属性可以。

至于 CSS3 过渡，似乎取决于 type of the property您只需要交叉检查 CSS 属性类型和可以设置动画的类型。例如，在我看来，采用 funciri 的蒙版将被排除在 CSS3 转换动画之外。