如何将CSS类应用于SVG文本元素 [英] How to apply a CSS class to a SVG Text element
问题描述
好吧，我要在这里走了。我开始试验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>
根据 http://www.w3.org/TR/SVG/styling.html#ClassAttribute 这应该可以工作...
According to http://www.w3.org/TR/SVG/styling.html#ClassAttribute this should work...
推荐答案
设置类是正确的，但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>
这篇关于如何将CSS类应用于SVG文本元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
