如何对 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的说法，这个应该可以..。

对于改变什么或者其他选择，有什么提示或者建议吗？

109486 次浏览
小开
最佳答案

设置类是正确的，但 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>

小开

这是用于给 SVG 文本着色的最佳 Google 结果，为了让像我这样的菜鸟更清楚，在2022年给一个 SVG 文本元素着色，使用中风和填充。

fill="red"
stroke="#0000FF"

就像您对轮廓颜色使用笔画，对形状的内部颜色使用填充一样，您也可以对 SVG 中的文本做同样的事情。

最好的消息是，如果您使用 fill="currentColor"而不是硬编码的颜色，您可以使用 CSS 设置 SVG 文本。

svg {
color: red;
}

单击“运行代码段”可查看此答案中的示例。

<svg height="202" width="202">
<circle cx="101" cy="101" r="100"
stroke="red"
stroke-width="1"
fill="none"
/>


<!-- fill="currentColor" if you want to use CSS to set the color of SVG text -->
<text x="100" y="100"
text-anchor="middle"
fill="red"
stroke="#0000FF"
stroke-width="1px"
alignment-baseline="middle"
font-variant="all-small-caps"
font-size="25"
font-weight="bold"
>
Font is Colored
</text>

小开

The accepted answer doesn't work for me either, so I did more research, and found a solution. 如果将 SVG <text .../>元素包装在 <g .../>(group)元素中，它就可以工作:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="mainsvg">
<g class="caption">
<text x="65" y="40" fill="currentcolor">Fact</text>
</g>
</svg>

这将 CSS 应用于 <g>，然后 <text>元素将父元素的 currentcolor继承到它的 fill(或 stroke)中。


提交答案