Repeated pattern in a Raphael element

Question

Is there a way to have a repeated pattern as the background to a Raphael element?

In particular, can I overlay a semi-transparent .png on top of the fill colour? (or an alternative might be to have a clip-path (not rect) for an image)

Answer 1

Here's the SVG solution to having a repeater pattern as background. You can work your way from there.

First of all create a pattern and in that pattern put the image you want to repeat. Give an ID to that pattern and use that ID as an IRI in the fill value of your shape that needs tiling.

To also have a default background you only need to have another identical shape behind it with the background you'd like.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 800 400" 
    version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <pattern id="myTile" patternUnits="userSpaceOnUse"
             x="0" y="0" width="20" height="20"
             viewBox="0 0 20 20" >
      <image x="0" y="0" width="20px" height="20px" xlink:href="tile.png" />
    </pattern> 
  </defs>

  <rect x="0" y="0" fill="Red" width="800" height="400">
  </rect>
  <ellipse fill="url(#myTile)" stroke="black" stroke-width="5"  
        cx="400" cy="200" rx="350" ry="150" />
</svg>

Warning: Running the example above may hurt your eyes.