web-dev-qa-db-fra.com

Comment appliquer une couleur à un élément de texte SVG

Ok ... je suis en train de devenir fou ici. J'ai commencé à expérimenter avec SVG. Travailler avec SVG et y appliquer des classes CSS fonctionne à merveille. Je ne peux tout simplement pas comprendre ce que je fais de travers, mais je ne peux pas que la classe travaille sur un élément de texte svg. Je l'ai enlevé complètement et voici ce que j'ai obtenu:

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

Selon http://www.w3.org/TR/SVG/styling.html#ClassAttribute cela devrait fonctionner ...

Des astuces/conseils sur ce qu'il faut changer, ou une alternative?

html5css3textsvg
58
Bastiaan Linders

La définition de la classe est correcte mais la propriété de couleur CSS n’a aucun effet sur SVG. SVG utilise les propriétés remplissage et contour . Dans votre cas, il vous suffit probablement de changer de couleur pour remplir. Cela affiche un texte jaune pour moi dans 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>
73
Robert Longson