Bas*_*ers 64 html5 svg text css3
好的......我在这里疯了.我已经开始尝试使用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这应该工作...
关于改变什么或替代方案的任何提示/提示？
Rob*_*son 80
设置类是正确的,但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>
这是 Google 为 SVG 文本着色的最高结果，让像我这样的新手非常清楚，在 2022 年为 SVG 文本元素着色、使用描边和填充。
fill="red"
stroke="#0000FF"
就像您使用描边作为形状的轮廓颜色并使用填充作为形状的内部颜色一样，您可以对 SVG 中的文本执行相同的操作。
最好的消息是，如果您fill="currentColor"不使用硬编码颜色，则可以使用 CSS 设置 SVG 文本。
svg {
color: red;
}
单击运行代码片段即可查看此答案中的示例。
fill="red"
stroke="#0000FF"