如何将颜色应用于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这应该行得通。。。
关于要更改的内容或替代方案的任何提示/提示？
共有3个答案
公认的答案对我也不起作用，所以我做了更多的研究，找到了一个解决办法。如果包装SVG
<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 应用于
这是谷歌为SVG文本着色的顶级结果，为了让像我这样的新手非常清楚，在2022年为SVG文本元素着色，使用描边和填充。
fill="red"
stroke="#0000FF"
就像您对形状的轮廓颜色使用描边，对形状的内部颜色使用填充一样，您也可以对SVGs中的文本执行同样的操作。
最好的消息是，如果您使用填充="当前颜色"而不是硬编码颜色，您可以使用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>
设置类是正确的，但 CSS 颜色属性对 SVG 没有影响。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 {
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颜色，但到目前为止我还没有做到这一点。我把它放在css中，但是无论如何我的图像总是黑色的。我的代码： 问题答案： 您不能以这种方式更改图像的颜色。如果将SVG加载为图像，则无法在浏览器中使用CSS或Javascript更改其显示方式。 如果你想改变你的SVG图像，你必须用它来装载，或使用在线。 如果要使用页面中的技术，则需要Modernizr库，您可以在其中
-
我想使用这种技术并更改SVG颜色，但到目前为止我还没能这样做。我把这个放在CSS中，但我的图像总是黑色的，不管怎么样。 我的代码： null null
-
我有一个，它是一个全黑的小符号。正在我拥有的自定义子类中设置。是否有可能让图像对其应用，从而代替黑色图像将颜色更改为的任何颜色？ 我只是想避免创造新的资产。
-
我想使用Markdown来存储文本信息。但是快速谷歌搜索说Markdown不支持颜色。StackOverflow也不支持颜色。与GitHub标记相同。 是否有任何允许彩色文本的Markdown风格？
-
我想使用Markoff来存储文本信息。但是快速谷歌搜索说Markoff不支持颜色。Stack Overflow也不支持颜色。与GitHub降价的情况相同。 是否有任何允许彩色文本的降价风格？
-
此外，我尝试以以下方式使用对象标记： 但是，同样，如果我用CSS指令或将类应用到对象标记，则不会发生任何变化。有什么想法可以实现我想要的吗？