如何将颜色应用于 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 这应该可以工作……

关于改变什么或替代方案的任何提示/提示?

原文由 Bastiaan Linders 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 440
1 个回答

设置类是正确的,但 CSS 颜色属性对 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>

原文由 Robert Longson 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题