Wie man eine CSS-Klasse auf ein SVG-Textelement anwendet

Okay ... Ich bin verrückt hier. Ich habe mit SVG experimentiert. Das Arbeiten mit SVG und das Anwenden von CSS-Klassen funktionieren wie ein Zauber. Ich kann nur nicht herausfinden, was ich falsch mache, aber ich kann nicht die Klasse, um an einem Svg-Text-Element zu arbeiten. Ich habe es den ganzen Weg nach unten abgezogen und das ist, was ich habe:Wie man eine CSS-Klasse auf ein SVG-Textelement anwendet

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

Nach http://www.w3.org/TR/SVG/styling.html#ClassAttribute dies funktionieren sollte ...

Irgendwelche Hinweise/Tipps, was zu ändern, oder eine Alternative?

Quelle

2013-07-04 Bastiaan Linders

Wenn ich die W3-Link lesen, können Sie nicht Grenze festlegen. Es heißt Schlaganfall. –

Nun, die Grenze funktioniert gut. Der Strich wird für alles verwendet, was Sie tatsächlich "zeichnen". Aber meine Frage bezieht sich auf die Klasse auf dem Textelement, wo ich die Farbe des Textes genau wie in der w3-Verknüpfung einstelle. –

Das Festlegen der Klasse ist korrekt, aber die CSS-Farbeigenschaft hat keine Auswirkungen auf SVG. SVG verwendet fill und stroke Eigenschaften. In Ihrem Fall müssen Sie wahrscheinlich nur die Farbe ändern, um zu füllen. Dies zeigt gelben Text für mich in Firefox.

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

Quelle

2013-07-04 10:05:36

Versuchte es und nein ... Und erinnere dich. Farbe ist das, was sie als Beispiel bei der W3-Empfehlung geben. Ich habe es auf Farbe reduziert, um die einfachste mögliche Implementierung zu erhalten. –

Gut gemacht, Sie haben einen Fehler in der SVG-Spezifikation gefunden. Ich habe es zu w3c gemeldet: http://lists.w3.org/Archives/Public/www-svg/2013Jul/0001.html –

Nun, nein. Ich stimme zu, dass es einen Fehler gibt. Aber es ist nicht in der Dokumentation. Sie geben grundsätzlich an, was es sein soll. Es scheint nur, dass alle Browser dies nicht implementieren konnten. Was mir sehr unwahrscheinlich erscheint. Und denken Sie daran, es funktioniert auch nicht mit Füllung oder Strich. Es scheint, dass der CSS-Klassenselektor vollständig ignoriert wird (Chrome, FF und IE10). –

Wie man eine CSS-Klasse auf ein SVG-Textelement anwendet

Antwort

Verwandte Themen