Question

有没有办法可以将颜色作为一个整体应用于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;
}

希望这有帮助

Answer 1

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

使用CSS着色SVG图像

1 个答案: