Question

好的......我在这里疯了。我已经开始尝试使用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，这应该有用......

有关改变或替代方案的任何提示/提示？

Answer 1

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

如何将颜色应用于SVG Text元素

1 个答案: