Я пытаюсь использовать CSS :hover pseudoclass для стилей элементов SVG, встроенных в тег <defs> тегом <use>, но он не работает: -/Здесь мой код:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8"/>
<style type="text/css" media="screen">
.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; }
</style>
</head>
<body>
<svg version="1.1" width="640" height="480"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<polygon id="p0" points="100,0 50,86.6 -50,86.6 -100,0 -50,-86.6 50,-86.6" class="active"/>
<g id="gr1">
<polygon id="p1" points="130,0 50,86.6 -50,86.6 -100,0 -50,-86.6 50,-86.6"/>
<polygon id="p2" points="100,0 50,86.6 -50,86.6 -100,0 -50,-86.6 50,-86.6" class="active"/>
</g>
</defs>
<g transform="translate(70,100)">
<use xlink:href="#p0" transform="translate(40,0)"/>
<use xlink:href="#p0" transform="translate(250,0)"/>
<use xlink:href="#p0" transform="translate(460,0)" class="active" />
</g>
<g transform="translate(100,300)">
<polygon id="style" points="110,0 50,86.6 -50,86.6 -100,0 -50,-86.6 50,-86.6" class="foo"/>
<use xlink:href="#gr1" transform="translate( 350,2)" class="active2"/>
</g>
</svg>
</body>
</html>
Я хочу, чтобы он работал так, что когда пользователь помещает указатель мыши над внедренным элементом, его внутренний элемент с классом "active" изменит его стиль. Он работает, когда я вставляю одну фигуру из <defs> напрямую и применяю класс CSS к <use>, который его внедряет. Но он не работает ни для каких классов или идентификаторов внутри группы, встроенной в <use>.
Как это исправить?
Или, может быть, есть лучший способ сделать это?
Мне нужно изменить только эту конкретную часть внутри внедренного объекта, когда пользователь зависает, а не целая группа. Это потому, что в разных частях этой группы были применены разные стили, и они должны меняться по-разному, когда они зависают от мыши.
Изменить: что я хочу получить
То, что я хочу получить, - это способ вставить один "объект библиотеки" из <defs> во многие разные места моего документа SVG. Некоторые части этого объекта должны быть оформлены с использованием пользовательских цветов из CSS, потому что мне нужна легкая настройка этих цветов без изменения кода объекта библиотеки.
И тогда мне нужно сообщить пользователю, когда указатель мыши находится над таким "активным" объектом, по-разному ставя его части: некоторые яркие очертания здесь и там, чтобы показать форму кликабельных областей, когда курсор мыши над ними.
К сожалению, я не могу применить стиль к подэлементам элементов <use>, потому что они не являются подэлементами <use> в DOM (как уже упоминалось ранее). Я могу применить некоторые стили к элементам внутри раздела <defs>, потому что они находятся в DOM, и они адресуются с помощью селекторов CSS, но их нельзя зависнуть, потому что они невидимы, поэтому применение псевдонимов :hover к они не работают. И это не работает, если этот класс применяется к <use>, потому что тогда я не могу подбирать соответствующие подэлементы (они не являются подэлементами <use>). Поэтому у меня нет привязки для применения этих :hover псевдокласса к.
Может быть, есть другое решение моей проблемы?
