0

我正在使用从 Adob​​e 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="locations" 添加到路径中，它当然只会翻转那个元素而不是元素组。当我像这样添加课程时，什么也没发生。g id="WIRE_ROOM" 类="位置"

如果有人可以帮助我，我将不胜感激，因为我已经搜索并尝试了我所知道的一切尝试。

所以在“WIRE_ROOM”的情况下，这些是不同的设备，我需要悬停来突出显示所有 3 个区域以表示一个公共区域。谢谢！

4

1 回答 1

0

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

当任何子hover元素被鼠标悬停时触发组上的状态，然后选择器将悬停样式应用于所有子路径。

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

于 2014-10-08T23:54:48.107 回答