Creating a pattern element in svg using raphael

Question

I have some pattern in svg that I applied to my rect, the code is like this

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" style="position:absolute; top:0px; left:0px">
  <defs> 
    <rect id="unitsqr" fill="#DBDBDB" stroke="white" stroke-width="1px" x="0" y="0" width="12" height="12"/>    
    <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
      <use xlink:href="#unitsqr" />
    </pattern>
  </defs>
  <rect fill="url(#grid)" x="0" y="0" width="100%" height="100%"/>
</svg>

I want to do some animation in raphael but also keep my grid , I don't get any clue on how to create a pattern in raphael and use it as a fill later. Is there a way to do that anyway?

Erik Dahlström · Accepted Answer · 2013-03-02T11:16:36.793

2

When you do Element.attr("fill", "http://example.com/example.png") Raphaël creates a <pattern> element for you under-the-hood if the SVG backend is used. But there's no highlevel API support in Raphaël for creating and manipulating pattern fills. So, either you'll need to extend Raphaël or you can do it with plain js assuming you don't care about the VML fallback for IE8 and lower.

edited Mar 02 '13 at 11:16

answered Mar 01 '13 at 10:08

Erik Dahlström

59,452
12
120
139

score 0 · Answer 2 · answered Sep 26 '14 at 20:37

The correct syntax would be

Element.attr("fill" , "url(http://exmaple.com/example.png)") ;

You can do funky stuff like filling creating an image shaped like a circle or a path easily by creating an element using Raphael.path or Raphael.circle and setting the fill to a url.

Creating a pattern element in svg using raphael

2 Answers2