简体   繁体   中英

Color SVG image with CSS

Is there a way I can apply colors to SVG image as a whole? not going down to each path and circle and line I have and doing it one by one?

I tried to group my svg elements with

<g class="myImage"> 

and in the myImage class i put fill:red to make it apply to all the elements in that group, but that doesnt work!!

How can I make it so I can only apply a color once and it goes to the whole image or elements in a group?

--added code

This is my SVG file (this is just a sample, i know the circle repeats 3 times)

<?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>

and in my logo.css file i have a class

.logo {
    fill:red;
}

Hope this helps

You're doing it right. The fill should inherit from the <g> element and all the circles will be red, one on top of another. Firefox displays a big red circle.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM