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?

Answer 1

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.