使用CSS設置SVG元素的樣式

Question

所有，

我對使用SVG非常陌生，我希望這里的人可以向我解釋如何使用CSS定位SVG的特定元素？

我要做的是放一張國家/地區地圖，當用戶將鼠標懸停在特定區域時，特定區域將顯得更暗。 該地圖是在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設置“ display：none”時，它確實隱藏了該區域。 那么，為什么懸停屬性不起作用？

Answer 1

<g>元素定義了一組SVG元素。 實際上，它不會在渲染的SVG圖像中占用任何空間。 因此，您無需進行任何:hover即可激活樣式表中的此規則。

您可以通過為組的子元素設置:hover規則，或通過向CSS規則添加子選擇器（例如#Area1 > *:hover ）來解決此問題。

這是一個簡單的示例（ JSFiddle鏈接 ）

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映射

如果嘗試從多個重疊的<image>元素創建SVG映射，則重疊部分會出現問題，因為:hover樣式僅應用於最頂部的元素，即使它僅包含透明像素也是如此。

要解決此問題，您將必須對地圖的每個部分應用SVG剪貼蒙版。 另外，您可以完全根據SVG元素創建地圖。 這是后一種方法的示例。

Answer 2

我認為您的問題是您的組ID（g標簽）與圖像元素的ID相同

<image overflow="visible" width="209" id="Area1" height="248" xlink:href="//www.elige-argentina.com/assets/img/mapa-argentina.png"  transform="matrix(1 0 0 1 612.6923 23.6923)">
</image>

工作小提琴： http : //jsfiddle.net/b2f2jx0f/3/