SVG USE-Element und: Hover-Stil

Question

Dec 02, 2012, 09:20 PM

SVG USE-Element und: Hover-Stil

Ich versuche CSS zu benutzen:hover Pseudoklasse zum Formatieren von eingebetteten SVG-Elementen<defs> durch<use> tag, aber es scheint nicht zu funktionieren: - / Hier ist mein Code:

<!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>

Ich möchte, dass es so funktioniert, dass, wenn der Benutzer den Mauszeiger über das eingebettete Element platziert, das innere Element mit der Klasse "active" seinen Stil ändert. Es funktioniert, wenn ich eine Form aus dem einbette<defs> direkt und wenden Sie die CSS-Klasse auf die an<use> was es einbettet. Es funktioniert jedoch nicht für Klassen oder IDs in der Gruppe, die durch eingebettet ist<use>.

Wie man es repariert?

Oder gibt es vielleicht einen besseren Weg, dies zu tun?

Ich muss nur diesen bestimmten Teil innerhalb des eingebetteten Objekts ändern, wenn der Benutzer den Mauszeiger darüber hält, nicht die gesamte Gruppe. Dies liegt daran, dass auf verschiedene Teile dieser Gruppe unterschiedliche Stile angewendet werden und sie sich beim Bewegen mit der Maus unterschiedlich ändern müssen.

Edit: Was ich bekommen will

Was ich bekommen möchte, ist eine Möglichkeit, ein "Bibliotheksobjekt" von einzubetten<defs> an vielen verschiedenen Stellen in meinem SVG-Dokument. Einige Teile dieses Objekts müssen mit benutzerdefinierten Farben aus dem CSS formatiert werden, da ich diese Farben einfach anpassen muss, ohne den Code des Bibliotheksobjekts zu ändern.

Und dann muss ich dem Benutzer signalisieren, wenn sich der Mauszeiger über einem solchen "aktiven" Objekt befindet, indem ich seine Teile anders gestalte: einige helle Umrisse hier und da, um die Form der anklickbaren Bereiche anzuzeigen, wenn sich der Mauszeiger darüber befindet.

Leider kann ich den Stil nicht auf die anwenden<use> Unterelemente des Elements, weil sie keine Unterelemente von<use> im DOM (wie bereits erwähnt). Ich kann einige Stile auf die Elemente in der anwenden<defs> Abschnitt, weil sie im DOM sind und mit CSS-Selektoren adressierbar sind, aber siekann nicht schweben, weil sie unsichtbar sind, also anwenden:hover Pseudoklasse zu ihnen funktioniert nicht. Und es funktioniert auch nicht, wenn diese Klasse auf das angewendet wird<use>, weil ich dann nicht die richtigen Unterelemente auswählen kann (sie sind keine Unterelemente von<use>). Also habe ich keinen Haken, um diese anzuwenden:hover Pseudoklasse zu.

Vielleicht gibt es eine andere Lösung für mein Problem?