哪些SVG属性可以使用CSS(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;
}只是为了玩..。小提琴
到目前为止，我发现您可以操纵颜色、笔画、不透明度，甚至可以对这些属性进行CSS3转换，但我无法在任何地方找到明确的列表或诸如“这样的所有SVG属性都可以由SVG控制”之类的指导方针。
我很好奇，因为Raphael的第一个项目只是一个POC，但是很快我们就会开始一个新的项目，我们想要清理它的几个方面(比如将样式和JS混合起来)，并尽可能地以“现代”的方式来完成它。
是否有特定的列表或规则来定义哪些SVG属性和/或元素可以由SVG控制？此外，是否有任何警告，例如只有以某种方式创建的svg元素才能被样式化，而其他元素则.？
谢谢!
回答 2
Stack Overflow用户
发布于 2014-06-02 13:08:50
在SVG规范中，元素属性被划分为CSS属性和普通属性。CSS不能操作属性，但CSS属性可以操作。
至于CSS3转换，它似乎取决于财产类型，您只需要交叉检查CSS属性类型和可以动画的类型。例如，在我看来，作为一个函数的面具将被排除在CSS3转换的动画之外。
Stack Overflow用户
发布于 2014-06-02 13:00:38
我相信有相当多的属性可以被样式化，找到所有SVG规范查询的最好地方是在W3网站。里面有一个关于造型的章节。
据我所知，添加到DOM中的任何SVG都应该可以通过CSS进行样式设置。您必须记住CSS是添加到DOM中的，并被视为普通DOM。这就是为什么它比画布慢的原因，因为浏览器必须解析您要添加的SVG，但是您可以从常规的DOM (比如CSS )和使用jQuery选择器中获得好处。
https://stackoverflow.com/questions/23995091
复制相似问题
腾讯云开发者
