好吧……我要疯了。我已经开始尝试使用 SVG。使用 SVG 并将 CSS 类应用到它就像一种魅力。我只是不知道我做错了什么，但我只是无法让类(class)在 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 颜色属性对 SVG 没有影响。 SVG 使用 fill和 stroke特性。在您的情况下，您可能只需要更改颜色即可填充。这会在 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>关于html - 如何将颜色应用于 SVG 文本元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17466707/