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控制。

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

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

谢谢！

Answer 1

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

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

Answer 2

我相信可以设置相当多的属性，找到所有SVG规范查询的最佳位置是W3 website。那里有关于造型的部分。

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

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

2 个答案: