Can an SVG object have both a fill colour and a fill pattern?

Question

I'm working with SVG using the Raphael library. I can apply a fill colour to an object like so:

circle.attr({fill: "#ff0000"});

And this also works (though the Raphael documentation doesn't mention it):

circle.attr({fill: "url(pattern.png)"});

I am able to use transparent PNGs as fill patterns, and transparency works as expected. The svg object is completely transparent where the fill pattern image is transparent. But what I would like to do is specify both a fill pattern image and a fill colour, so that the colour would show through where the pattern image is transparent - similar to the 'background' property using CSS, for example. Is this possible with SVG?

score 10 · Accepted Answer · answered Jul 07 '11 at 07:45

10

You can define a pattern that has a rect with a fill, and an image that is your png on top of that rect. Then use the pattern as fill for the circle (or whatever element you want).

This means stepping outside of Raphaël, or extending it to do what you want. Note that what ({fill: "url(pattern.png)"}) does is to create a pattern element and and append an image element pointing to the given url. It's quite possible to hack Raphaël to allow you to pass a color too, and then you deal with that in the code that creates the pattern by creating a rect of the same dimensions as the image with the given fill color.

I should say that if you want it to work with IE<9 then you probably need to implement it in VML too.

Other options include drawing two shapes, one with color fill and the other with the raster image fill. Yet another is to make the png include the background color so that it's not transparent.

answered Jul 07 '11 at 07:45

Erik Dahlström

59,452
12
120
139

Thanks for the very thorough answer! – shipshape Jul 08 '11 at 18:59
Hi @Erik I'm trying to add the image on top of the rect at the pattern tag. But it turns out that it does not stack on top of each other. The rect is always showing and the image pattern just shows if I remove the rect element. What's going on? – Halian Vilela Jun 12 '13 at 22:06
@Lianzinho you should create a new question for that, with more details. – Erik Dahlström Jun 13 '13 at 17:10
2

Please provide example please – Feroza Mar 17 '15 at 08:05

Can an SVG object have both a fill colour and a fill pattern?

1 Answers1