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

Question

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

3

我刚刚完成了一个使用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属性如this都可以由SVG控制。

我很好奇，因为Raphael的第一个项目只是一个POC，但很快我们将开始一个新项目，并且我们希望清理其中的几个方面（例如将样式与JS混合）并以尽可能“现代”的方式完成。

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

谢谢！

- Blunderfest

你可以查看这个网页，或许会有所帮助：http://tutorials.jenkov.com/svg/svg-and-css.html - Luís P. A.

3

值得一读：http://www.w3.org/TR/SVG11/styling.html。 - emerson.marini

@ZachSaucier 这可能会解决 OP 的问题，但我认为最好将其作为评论留下。我没有真正的贡献，只是谷歌和 W3。 - emerson.marini

2个回答

1

我相信有很多属性可以进行样式设置，找到所有SVG规范查询的最佳地方是W3网站。其中有一个关于样式的部分。

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

- Ian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robert Longson · Accepted Answer

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

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