Raphael JS use SVG fill pattern

663 Views Asked by At

I can use fill patterns for SVG graphics. But they don't seem to work with raphael.js.

When I try referencing a fill pattern, nothing happens.

fill_circle.attr("fill": "url(#diagonalHatch)");

Here is a fiddle: http://jsfiddle.net/dfg7Lktc/

  1. The circle on the top is a regular SVG filled with a #diagonalHatch fill pattern I created
  2. The left circle is made with raphael and filled yellow, working fine
  3. The right circle is made with raphael too and filled with the #diagonalHatch fill pattern, but it doesn't work.

Is there a way to use fill patterns with raphael? Or do they only work with "real" SVG objects?

Did I make any mistake?

1

There are 1 best solutions below

0
On

Raphael as far as I know, does not support this. However, Snap.svg, which was created by the same guy, does.