Question

我正在处理从Adobe Illustrator输出的SVG文件，因此可能存在相当多的不必要的代码。经过搜索和搜索，我得出了这个。

<?xml-stylesheet type="text/css" href="SVG_css.css"?>

path:hover{
fill:#005289;
}

从外部样式表中获取翻转工作，但它当然将每个路径作为翻转目标。

例如，我需要定位组中的路径，以便在翻转时突出显示三个元素。这是Illustrator的代码结构。

    <g id="WIRE_ROOM">
    <path fill="#BCBEC0" d="M357.3,24.4c0,0.6-0.6,1-1.4,1h-8.1c-0.8,0-1.4-0.5-1.4-1v-8.9c0-0.6,0.6-1,1.4-1h8.1c0.8,0,1.4,0.5,1.4,1
        V24.4z"/>
    <path fill="#BCBEC0" d="M357.3,51.4c0,0.6-0.6,1-1.4,1h-8.1c-0.8,0-1.4-0.5-1.4-1v-8.9c0-0.6,0.6-1,1.4-1h8.1c0.8,0,1.4,0.5,1.4,1
        V51.4z"/>
    <path fill="#BCBEC0" d="M376.7,24.4c0,0.6-0.6,1-1.4,1h-8.1c-0.8,0-1.4-0.5-1.4-1v-8.9c0-0.6,0.6-1,1.4-1h8.1c0.8,0,1.4,0.5,1.4,1
        V24.4z"/>
</g>

我尝试将ID与样式表相关联，并且没有运气......我也尝试将类直接关联到SVG中。

如果我添加class =＆＃34; locations＆＃34;它当然只会滚过那个元素而不是元素组。当我添加这样的课程时，没有发生任何事情。 g id =＆＃34; WIRE_ROOM＆＃34;类=＆＃34;位置＆＃34;

如果有人能帮助我，我会很感激，因为我已经搜索并尝试了我所知道的所有尝试。

所以在＆＃34; WIRE_ROOM＆＃34;那些是不同的设备，我需要悬停突出显示所有这三个区域，以表示一个公共区域。谢谢！

Answer 1

为了将来参考，您正在寻找的选择器是g#WIRE_ROOM:hover path或g.locations:hover path（我建议使用该类而不是ID）。

当任何子元素被鼠标悬停时，会触发组中的hover状态，然后选择器将悬停样式应用于 all 孩子们的路。

您必须明确提及选择器中的路径 - 您不能依赖继承 - 因为您的文件直接在路径上设置填充颜色，这优先于任何继承的样式。

在SVG中定位g id以进行翻转

1 个答案: