css - 使用 CSS 设置 SVG 元素的样式

Question

全部，

我对使用 SVG 很陌生，我希望这里有人可以向我解释如何使用 CSS 定位我的 SVG 的特定元素？

我想做的是将一张国家 map 放在一起，当用户将鼠标悬停在特定区域上方时，特定区域会显得更暗。该 map 是在 Photoshop 中分层制作的，然后导入 Illustrator 并导出为 SVG 文件。到目前为止，一切都很好。但是当我尝试为它们的各个部分设置样式时遇到了麻烦(Illustrator 在“g”ID 和标签中放置了这些部分)。

代码如下所示:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 1762 2043" style="enable-background:new 0 0 1762 2043;" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace">

<g id="Area1">

        <image style="overflow:visible;" width="378" height="272" id="Area1" xlink:href=".../.../121F7A955DACD041.png" transform="matrix(1 0 0 1 657 912)">
    </image>
</g>

后跟“Area2”、“Area3”等

现在我想如果我只是在我的样式表中使用“Area1:hover”，它会起作用——但它不起作用。

奇怪的是，当我在我的 CSS 中为相同的 ID 设置“显示:无”时，它确实隐藏了该区域。那么为什么悬停属性不起作用？

Answer 1

<g>元素定义一组 SVG 元素。它实际上不占用渲染的 SVG 图像中的任何空间。所以你没有什么可以:hover为了在您的样式表中激活此规则。

您可以通过设置 :hover 来解决这个问题组子元素的规则，或者通过向 CSS 规则添加子选择器，例如 #Area1 > *:hover ，例如。

这是一个简单的例子 ( JSFiddle link )

CSS:

#a1 > *:hover {
    fill:#fc0;
}

SVG:

<svg viewBox="0 0 200 200">
    <g id="a1" style="fill:#e82">
        <path d="M50,50v100h100v-100z" />
    </g>
</svg>

更新:使用 :hover 创建 SVG map 样式属性

如果您尝试从多个重叠创建 SVG map <image>元素，你会在重叠部分遇到问题，因为 :hover样式仅应用于最顶层的元素，即使它仅包含透明像素也是如此。

要解决此问题，您必须对 map 的每个部分应用 SVG 剪切蒙版。或者，您可以完全从 SVG 元素创建 map 。 Here's an example of the latter approach.