Идентификатор таргетинга в SVG для ролловеров

Question

Я работаю с SVG-файлом, который был выведен из Adobe Illustrator, так что, возможно, в нем есть немного ненужного кода. После поиска и поиска я смог придумать это.

<?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="location" к пути, он, конечно, будет пролонгировать только этот элемент, а не группу элементов. Когда я добавил класс таким образом, ничего не произошло. g id="WIRE_ROOM" class="location"

Я был бы признателен, если бы кто-то мог помочь мне с этим, поскольку я искал и пробовал все, что я знаю, чтобы попробовать.

Так что в случае "WIRE_ROOM" это разные части оборудования, и мне нужно навести курсор на все 3 из этих областей, чтобы обозначить одну общую область. Спасибо!

Answer 1

Для дальнейшего использования искомый селектор g#WIRE_ROOM:hover path или же g.locations:hover path (Я бы рекомендовал использовать класс вместо идентификатора).

hover состояние в группе срабатывает, когда любой из дочерних элементов наведен, а затем селектор применяет стиль наведения ко всем дочерним путям.

Вы должны специально упомянуть пути в селекторе - вы не можете полагаться на наследование - потому что ваш файл напрямую устанавливает цвета заливки на пути, что имеет приоритет над любым унаследованным стилем.