使用CSS（3）可以操作哪些SVG属性？

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;
}

只是为了玩... 小提琴

到目前为止，我发现你可以操纵颜色，笔触，不透明度，甚至把CSS3过渡放在这些属性上，但我无法在任何地方找到确定的列表或指南，例如“像这样的所有SVG属性都可以由SVG控制。

我很好奇，因为拉斐尔的第一个项目只是一个POC，但很快我们将开始一个新的项目，我们想要清理它的几个方面（比如将样式与JS混合）并做它以尽可能“现代”的方式。

是否有特定的列表或规则来定义SVG可以控制哪些SVG属性和/或元素？ 此外，是否有任何警告，例如只有以某种方式创建的svg元素可以设置风格，而其他...？

谢谢！

Answer 1

元素属性在SVG规范中划分为CSS属性和普通属性 。 CSS不能操纵属性，但CSS属性可以。

至于CSS3过渡，它似乎取决于属性的类型您只需要与可以设置动画的类型交叉检查CSS属性类型。 例如，在我看来，采用funciri的掩码将被排除在CSS3过渡的动画之外。

Answer 2

我相信有很多可以设置样式的属性，找到所有SVG规范查询的最佳位置是在W3网站上 。 那里有一个关于造型的部分。

据我所知，你添加到DOM的任何SVG都应该通过CSS设置样式。 你必须记住，CSS被添加到DOM中，并像普通DOM一样对待。 这就是为什么它比canvas慢，因为浏览器必须解析你正在添加的SVG，但是你可以获得常规DOM的好处，例如CSS和使用jQuery选择器。