CODEWITHSUNDEEP
javascriptsvg
hyperexpert
hyperexpert

Reputation: 532

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

Upvotes: 1

Views: 296

Answers (1)

Robert Longson
Robert Longson

Reputation: 124219

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.

Upvotes: 1

Related Questions