SVG USE элемент и: стиль наведения

я пытаюсь использовать CSS:hover псевдокласс для стилизации элементов SVG, встроенных из от тег, но это не такКажется, работает: - / Здесь 'мой код:




 
 
        .active { fill: #0BE; }
        .active:hover { opacity: 0.8; stroke: #F0F; stroke-width: 4px; }
        .active2 #p2 { fill: #0BE; }
        .active2:hover #p2 { opacity: 0.8; stroke: #F0F; stroke-width: 4px; }
        #p2:hover { opacity: 0.8; stroke: #F0F; stroke-width: 4px; }
    






 
  
  
      
      
  
 

 
    
    
    
 
 
    
    
 





Я хочу, чтобы он работал таким образом, чтобы, когда пользователь помещает указатель мыши на встроенный элемент, его внутренний элемент с классом "активный» изменит свой стиль. Это работает, когда я вставляю одну фигуру из непосредственно и применить класс CSS к который встраивает это. Но это неработать для любых классов или ID 's внутри группы, встроенной через.

Как это исправить?

Или, может быть, тамлучший способ сделать это?

Мне нужно изменить только эту конкретную часть внутри встроенного объекта, когда пользователь наводит на него курсор, а не всю группу. Это'Это связано с тем, что к разным частям этой группы применяются разные стили, и они должны меняться по-разному при наведении курсора мыши.

Редактировать: что я хочу получить

То, что я хочу получить, это способ встраивать один "библиотечный объект " от во многих разных местах в моем документе SVG. Некоторые части этого объекта нужно стилизовать с помощью пользовательских цветов из CSS, потому что мне нужно легко настроить эти цвета без изменения объекта библиотеки.с кодом.

И тогда мне нужно сигнализировать пользователю, когда указатель мыши находится над таким "активный» Объект по-разному стилизовать его части: некоторые яркие контуры тут и там, чтобы показать форму интерактивных областей, когда указатель мыши находится над ними.

К сожалению, я не могу применить стиль к элемент'субэлементы, потому что онине субэлементы в DOM (как уже упоминалось). Я могу применить некоторые стили к элементам внутри раздел, потому что онив DOM и ониадресуется с помощью селекторов CSS, но онине могу париться, потому что ониневидим, поэтому применяя:hover псевдокласс имт работа. И это нелибо работать, если этот класс применяется кпотому что тогда я не могу выбрать нужные субэлементы (онине подэлементы). Так что я нене имеет никакого крюка, чтобы применить эти:hover псевдокласс

Может бытьЕсть ли другое решение моей проблемы?

Ответы на вопрос(3)

Ваш ответ на вопрос