CODEWITHSUNDEEP
htmlcsssvg
Dr. Gianluigi Zane Zanettini
Dr. Gianluigi Zane Zanettini

Reputation: 1820

Recolor an SVG image via CSS "fill" doesn't work

I'm trying to recolor a simple SVG image with CSS (as I saw here http://codepen.io/chriscoyier/pen/evcBu ):

My HTML: <img src="http://dl.dropbox.com/u/12091580/rwdicon/icon-menu.svg" class="myMenu" alt="menu">

My CSS: .myMenu { fill: red; }

It's not working (see http://jsfiddle.net/sexyzane/1hojaccb/ )!

What am I doing wrong?

Upvotes: 0

Views: 2729

Answers (1)

SW4
SW4

Reputation: 71230

fill is used for svg element markup, you have an img element with an svg source, as such you cannot use fill to change the image color.

Instead, if you want to colorize the image, you may want to look into applying a CSS filter effect to the img tag, although this may not be able to achieve the exact result you're after.

Demo Fiddle

Upvotes: 3

Related Questions