Jak zastosować klasę CSS do elementu tekstowego SVG

OK ... Oszalam tutaj. Zacząłem eksperymentować z SVG. Praca z SVG i stosowanie do niej klas CSS działa jak urok. Po prostu nie mogę dojść do tego, co robię źle, ale nie mogę pozwolić, by klasa pracowała nad elementem tekstowym svg. Mam pozbawiono go w dół i to, co mam:Jak zastosować klasę CSS do elementu tekstowego SVG

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='UTF-8'> 
    <title>Playground</title> 
</head> 
<body> 
    <style type="text/css"> 
     .mainsvg { 
      height: 320px; 
      border: 1px solid red; 
      width: 400px; 
     } 
     .caption { 
      color: yellow; 
     } 
    </style> 
    <h2>SVG - Sandbox</h2> 
    <div> 
     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="mainsvg"> 
      <text x="65" y="40" class="caption">Fact</text> 
     </svg> 
    </div> 
</body> 
</html>

Według http://www.w3.org/TR/SVG/styling.html#ClassAttribute to powinno działać ...

żadnych wskazówek/porad na temat tego, co zmienić lub alternatywa?

Źródło

2013-07-04 Bastiaan Linders

Po przeczytaniu linku w3 nie można ustawić granicy. to się nazywa udar. –

Cóż, granica działa dobrze. Skok jest używany do wszystkiego, co faktycznie "rysujesz". Ale moje pytanie dotyczy klasy w elemencie tekstowym, w której ustawiam kolor tekstu, tak jak w linku W3. –

Ustawienie klasy jest poprawne, ale właściwość koloru CSS nie ma wpływu na SVG. SVG używa właściwości fill i stroke. W twoim przypadku prawdopodobnie musisz zmienić kolor, aby wypełnić. Wyświetli to dla mnie żółty tekst w Firefoksie.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='UTF-8'> 
    <title>Playground</title> 
</head> 
<body> 
    <style type="text/css"> 
     .mainsvg { 
      height: 320px; 
      border: 1px solid red; 
      width: 400px; 
     } 
     .caption { 
      fill: yellow; 
     } 
    </style> 
    <h2>SVG - Sandbox</h2> 
    <div> 
     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="mainsvg"> 
      <text x="65" y="40" class="caption">Fact</text> 
     </svg> 
    </div> 
</body> 
</html>

Źródło

2013-07-04 10:05:36

Wypróbowałem to i nie ... I pamiętaj. Kolor jest tym, co dają jako przykład w Rekomendacji W3. Rozebrałem go na kolor, aby uzyskać najłatwiejszą implementację do przetestowania. –

Dobra robota, znalazłeś błąd w specyfikacji SVG. Zgłosiłem to do w3c: http://lists.w3.org/Archives/Public/www-svg/2013Jul/0001.html –

No, nie. Zgadzam się, że jest błąd. Ale nie ma go w dokumentacji. Zasadniczo określają, co powinno być. Wygląda na to, że wszystkie przeglądarki nie mogły tego zaimplementować. Co wydaje mi się bardzo mało prawdopodobne. I pamiętaj, że nie działa również z wypełnieniem lub obrysem. Wygląda na to, że selektor klasy css jest całkowicie ignorowany (chrome, FF i IE10). –

Jak zastosować klasę CSS do elementu tekstowego SVG

Odpowiedz

Powiązane problemy