使用CSS着色SVG图像

时间:2013-03-10 08:41:06

标签: javascript svg

有没有办法可以将颜色作为一个整体应用于SVG图像?不要走到每条路径和我所拥有的圆和线上并一个接一个地做它?

我尝试用

对svg元素进行分组
<g class="myImage"> 

并且在myImage类中我将fill:red设置为适用于该组中的所有元素,但这不起作用!!

我怎样才能做到这一点,我只能应用一次颜色,它会转到整个图像或一组中的元素?

- 添加了代码

这是我的SVG文件(这只是一个示例,我知道圈子重复了3次)

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="../css/logo.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

<g class="logo">  
    <circle cx="50%" cy="50%" r="35%"/>
    <circle cx="50%" cy="50%" r="35%"/>
    <circle cx="50%" cy="50%" r="35%"/>
</g>
</svg>

在我的logo.css文件中我有一个类

.logo {
    fill:red;
}

希望这有帮助

1 个答案:

答案 0 :(得分:1)

你做得对。填充应继承自<g>元素,所有圆圈将为红色,一个在另一个上面。 Firefox显示一个大红圈。