Ориентация на g id в 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> 

Я попытался связать идентификатор в таблице стилей, и не было никакой удачи ... Я также попытался связать класс непосредственно в SVG.

Если я добавлю класс = "местоположения" к пути, он, конечно, перекатывается только над одним элементом, а не с группой элементов. Когда я добавил класс, ничего не произошло. g id = "WIRE_ROOM" class = "locations"

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

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

Answer 1

Для справки в будущем, селектор, который вы ищете, является g#WIRE_ROOM:hover path или g.locations:hover path (я бы рекомендовал использовать класс вместо ID).

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

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