如何将颜色应用于SVG文本元素

好吧...我要疯了。我已经开始尝试SVG。使用SVG并将CSS类应用于它就像是一种魅力。我只是不知道自己在做什么错，但我只是无法让该类在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>

根据http://www.w3.org/TR/SVG/styling.html#ClassAttribute，这应该有效...

关于更改内容或替代方法的任何提示/技巧？

— 巴斯蒂安·林德斯
source

如果我阅读了w3链接，则无法设置边框。这叫做中风。

— Kees Sonnema

好吧，边界工作得很好。笔画用于您实际“绘制”的所有内容。但是我的问题是关于text元素上的类的，在这里我像w3链接中那样设置文本的颜色。

— 巴斯蒂安·林德斯

设置该类是正确的，但是CSS color属性对SVG没有影响。SVG使用填充和描边属性。在您的情况下，您可能只需要更改颜色即可填充。这会在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>

— 罗伯特·朗森
source

尝试了，不...记住。颜色是他们在W3 Recommendation中提供的示例。我将其简化为彩色，以进行最简单的实现测试。

— 巴斯蒂安·林德斯

做得好，您已经发现SVG规范中的错误。我已将其报告给w3c：lists.w3.org/Archives/Public/www-svg/2013Jul/0001.html

— Robert

好吧，不。我同意有一个错误。但这不在文档中。他们基本上说出了应该是什么。似乎所有浏览器都无法实现此目的。这让我感到非常不可能。请记住，它也不适用于填充或描边。看来CSS类选择器已被完全忽略（chrome，FF和IE10）。

— 巴斯蒂安·林德斯

等待...。text.caption确实起作用。文本.caption（带空格）不....（这在所有3个浏览器中均经过填充测试）.caption也可以工作。我想知道我第一次建议您进行填充时测试了什么，但是没有用..

— 巴斯蒂安·林德斯

仅设置该color属性在svg中没有直接可见的效果，但是您可以将该颜色用于fill，stroke甚至可以同时使用两种颜色，例如text { fill: currentColor }。

— ErikDahlström'13年