使用CSS类来为SVG组添加样式

Question

使用CSS类来为SVG组添加样式

4

我希望能够使用CSS来突出显示SVG组。我尝试了以下代码。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <style type="text/css">
    * {stroke: black; fill: white}
    .A:hover {fill: orange}
    .B:hover {fill: blue}
  </style>
  <g class="A">
    <circle cx="100" cy="100" r="50" />
    <circle cx="250" cy="100" r="50" />
  </g>
  <circle class="B" cx="400" cy="100" r="50" />
</svg>

但是在Safari和Opera中，前两个圆圈悬停时没有变成橙色。我做错了什么？

- u003f

将样式添加到头部，而不是正文中。 - Ron van der Heijden

@arpit：那里不需要分号。Bondye：这种风格很好，SVG 中没有<head>或<body>。 - Erik Dahlström

1个回答

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

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

- Erik Dahlström · Accepted Answer

当鼠标悬停在<g>上时，填充颜色会被设置，但其他选择器会覆盖圆圈上的填充颜色。

.A:hover {fill: orange}

随着：

.A:hover * {fill: orange}

请查看代码演示。