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

发布于07月04日

好的...我在这里快要发疯了.我已经开始try 使用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的说法，这应该有效...

对于要更改的内容或替代方案，有什么提示/提示吗？

推荐答案

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