哪些SVG属性可以使用CSS操作(3)

Which SVG properties can be manipulated using CSS(3)?

本文关键字：操作 CSS SVG 属性 可以使 哪些      更新时间：2023-09-26

我刚刚完成了一个使用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元素可以被样式化，而其他元素…?

谢谢!

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

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

我相信有相当多的属性可以样式化，找到所有SVG规范查询的最佳地点是W3网站。里面有一节是关于样式的

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

相关文章：