我能在SVG中使用CSS吗，还是只能部分地使用？

Question

我能在SVG中使用CSS吗，还是只能部分地使用？

3

我曾经在某个地方看到过CSS和SVG不兼容，但事实上CSS可以很好地与SVG配合使用。看一下这个例子：

<html>
<head>
<style> 
    rect:hover{
      opacity: 0.5;
    }
</style>
</head>
<body>
<svg> 
    <rect width="300" height="100" style="fill:#d64526" />
</svg>

</body>
</html>

这个可以实现，但如果我将CSS元素更改为这样：

rect:hover{
 fill: blue;
}

鼠标悬停时颜色不会改变。发生了什么？它部分地起作用了吗？

- Dark Night

1

我建议观看 Chris Coyden Primer。 - marblewraith

2

并不是互联网上的所有内容都是真实的。CSS 和 SVG 可以一起使用。 - Robert Longson

@MatthewRath 为什么你的评论没有更多的赞 :D ?? - user4431269

1

可能会有些问题，因为它不是一个具体的答案，但是非常相关。 - marblewraith

1个回答

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

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

- Josh Crozier · Accepted Answer

发生了什么？它部分工作？

内联样式（通过style属性添加）更加具体，这意味着它覆盖了悬停时添加的颜色。添加到元素的内联样式将始终覆盖CSS中的任何样式（除非使用!important，应始终避免使用）。

请参阅CSS specificity上的MDN文章。

如果使用选择器rect设置初始颜色，则会按预期工作，因为rect:hover比rect具有更高的specificity，这意味着它将被覆盖。

rect {
  fill: #d64526
}
rect:hover {
  fill: blue;
}

<svg>
  <rect width="300" height="100" />
</svg>