Scaling a fill pattern in raphael.js

Question

paper=Raphael(\'previewBody\',480,480);
paper.path({\"stroke-width\":1},\'M0,0 L480,240 L480,480 L240,480 z\')
  .attr(\'fill\',\'url(bg.png)\'))
  .scale(.5,.5,0,0);
         


        

Answer 1

I don't know why but my version of Raphael library (I use newest) doesn't put ID as @ThibThib described. It's probably because we have 2013 now:)

I will post my solution as well:

Notice few things:

• accessing VML fill image is described here: How to access Raphael fill image in VML

• after changing size of image I had to reset stroke for VML version

• for some reason jQuery .attr didn't work for me, so I used setAttribute (Chrome)

• I set preserveAspectRatio to achieve same effect as in VML. You can disable it if you want to see differences (see documentation)

• setTimeout is used to wait for image to be loaded, as SVG was setting params after image was loaded, and it was overwriting my size change

You can of course play with different settings as well:

VML Fill element documentation

SVG Patterns

SVG Image element