Element SVG USE i: styl hover

Question

Dec 02, 2012, 09:20 PM

Element SVG USE i: styl hover

Próbuję użyć CSS:hover osadzone z pseudoklas do stylów elementów SVG<defs> przez<use> tag, ale wydaje się, że nie działa: - / Oto mój kod:

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

Chcę, aby działało w taki sposób, że gdy użytkownik umieści wskaźnik myszy nad osadzonym elementem, jego wewnętrzny element z klasą „aktywny” zmieni swój styl. Działa, gdy osadzę jeden kształt z<defs> bezpośrednio i zastosuj klasę CSS do<use> który ją osadza. Ale to nie działa dla żadnych klas lub identyfikatorów wewnątrz osadzonej grupy<use>.

Jak to naprawić?

A może jest lepszy sposób, aby to zrobić?

Muszę zmienić tylko tę konkretną część wewnątrz osadzonego obiektu, gdy użytkownik na nim unosi, a nie całą grupę. Dzieje się tak, ponieważ różne części tej grupy miałyby zastosowane różne style i muszą zmieniać się inaczej, gdy są zawieszone przez mysz.

Edytuj: co chcę dostać

Chcę uzyskać sposób na osadzenie jednego „obiektu biblioteki”<defs> w wielu różnych miejscach w moim dokumencie SVG. Niektóre części tego obiektu muszą być stylizowane za pomocą niestandardowych kolorów z CSS, ponieważ potrzebuję łatwego dostosowania tych kolorów bez zmiany kodu obiektu biblioteki.

Następnie muszę zasygnalizować użytkownikowi, kiedy wskaźnik myszy znajduje się nad takim „aktywnym” obiektem, stylizując jego części inaczej: niektóre jasne kontury tu i tam, aby pokazać kształt klikalnych obszarów, gdy wskaźnik myszy jest nad nimi.

Niestety, nie mogę zastosować stylu do<use> podelementów elementu, ponieważ nie są podelementami<use> w DOM (jak inni już wspominali). Mogę zastosować niektóre style do elementów wewnątrz<defs> sekcja, ponieważ są w DOM i są adresowalne za pomocą selektorów CSS, ale onenie może być unosić się, ponieważ są niewidoczne, więc aplikują:hover pseudoklaska do nich nie działa. I to nie działa, jeśli ta klasa jest zastosowana do<use>, ponieważ wtedy nie mogę wybrać właściwych elementów podrzędnych (nie są one podelementami<use>). Więc nie mam żadnego haka, żeby je zastosować:hover pseudoklaska do.

Może jest jakieś inne rozwiązanie mojego problemu?