所有
我对使用SVG很陌生，我希望有人可以向我解释如何使用CSS定位SVG的特定元素？
我尝试做的是将国家地图放在一起，当用户将鼠标悬停在特定区域时，特定区域会显得更暗。地图在Photoshop中以图层形式制作，然后在Illustrator中导入并导出为SVG文件。到现在为止还挺好。但是当我尝试设计各个部分（Illustrator放入＆＃34; g＆＃34; 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>
其次是＆＃34; Area2＆＃34;，＆＃34; Area3＆＃34;等
现在我想是否只是使用＆＃34; Area1：hover＆＃34;在我的样式表中，它可以工作 - 但它没有。
奇怪的是，当我设置＆＃34;显示：无＆＃34;对于我的CSS中的相同ID，它会隐藏该区域。那么为什么要赢得悬停属性呢？
答案 0 :(得分：2)
<g>元素定义了一组SVG元素。它实际上并没有占用渲染的SVG图像中的任何空间。因此，为了在样式表中激活此规则，:hover没有任何内容可供您使用。
您可以通过为群组的子元素设置:hover规则，或者通过向CSS规则添加子选择器来解决此问题，例如#Area1 > *:hover。
这是一个简单的例子（JSFiddle link）
#a1 > *:hover {
fill:#fc0;
}
<svg viewBox="0 0 200 200">
<g id="a1" style="fill:#e82">
<path d="M50,50v100h100v-100z" />
</g>
</svg>
:hover样式属性如果您尝试从多个重叠的<image>元素创建SVG地图，您将在重叠部分出现问题，因为:hover样式仅应用于最顶层的元素，即使它只包含透明像素。
要解决此问题，您必须将SVG剪贴蒙版应用于地图的每个部分。或者，您可以完全从SVG元素创建地图。 Here's an example of the latter approach.
答案 1 :(得分：0)
我认为您的问题是您的群组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>