问题描述
好的......我在这里疯了。我已经开始尝试使用SVG了。使用SVG并将CSS类应用于它就像一个魅力。我只是无法弄清楚我做错了什么，但我不能让这个类在svg文本元素上工作。我一直把它剥掉了，这就是我得到的：
Okay... I'm going nuts over here. I've started experimenting with SVG. Working with SVG and applying CSS classes to it works like a charm. I just cant figure out what i'm doing wrong, but i just cant get the class to work on a svg text element. I've stripped it all the way down and this is what i got:
<!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>
根据这应该有用......
According to http://www.w3.org/TR/SVG/styling.html#ClassAttribute this should work...
关于改变什么或替代方案的任何提示/技巧？
Any hints/tips on what to change, or an alternative?
推荐答案
设置类是正确的但CSS颜色属性有对SVG没有影响。 SVG使用和属性。在您的情况下，您可能只需要更改颜色来填充。这会在Firefox中显示黄色文字。
Setting the class is correct but the CSS color property has no effect on SVG. SVG uses fill and stroke properties. In your case you probably just need to change color to fill. This displays yellow text for me in 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 Text元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！