So wenden Sie eine Farbe auf ein SVG-Textelement an

78

Okay ... ich werde hier verrückt. Ich habe angefangen, mit SVG zu experimentieren. Die Arbeit mit SVG und das Anwenden von CSS-Klassen funktioniert wie ein Zauber. Ich kann einfach nicht herausfinden, was ich falsch mache, aber ich kann die Klasse einfach nicht dazu bringen, an einem SVG-Textelement zu arbeiten. Ich habe es ganz ausgezogen und das habe ich bekommen:

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

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

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

html css text svg Bastiaan Linders
quelle
Wenn ich den w3-Link lese, können Sie keinen Rahmen festlegen. es heißt Schlaganfall.
Kees Sonnema
Nun, die Grenze funktioniert gut. Der Strich wird für alles verwendet, was Sie tatsächlich "zeichnen". Meine Frage bezieht sich jedoch auf die Klasse des Textelements, in der ich die Farbe des Textes genau wie im w3-Link festlege.
Bastiaan Linders

Antworten:

96

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

<!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>
Robert Longson
quelle
1
Versuchte es und nein ... Und denk dran. Farbe ist das, was sie als Beispiel in der W3-Empfehlung geben. Ich habe es auf Farbe reduziert, um die einfachste Implementierung zum Testen zu erhalten.
Bastiaan Linders
4
Gut gemacht, Sie haben einen Fehler in der SVG-Spezifikation gefunden. Ich habe es w3c gemeldet: lists.w3.org/Archives/Public/www-svg/2013Jul/0001.html
Robert Longson
Nun, nein. Ich bin damit einverstanden, 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 implementiert haben. Was mir sehr unwahrscheinlich erscheint. Und denken Sie daran, es funktioniert auch nicht mit Füllung oder Strich. Es scheint, dass der CSS-Klassen-Selektor vollständig ignoriert wird (Chrome, FF und IE10).
Bastiaan Linders
Warten Sie ... text.caption funktioniert. Text .caption (mit Leerzeichen) funktioniert nicht .... (dies wird mit dem Ausfüllen aller 3 Browser getestet) .caption funktioniert ebenfalls. Ich frage mich, was ich getestet habe, als Sie das erste Mal das Füllen vorgeschlagen haben, und es hat nicht funktioniert .....
Bastiaan Linders
9
Nur die Einstellung colorEigenschaft hat keine direkt sichtbaren Effekt in svg, aber diese Farbe für die verwenden kann fill, strokeoder sogar beides, zum Beispiel text { fill: currentColor }.
Erik Dahlström