CODEWITHSUNDEEP
javascriptsvgraphael
MKoosej
MKoosej

Reputation: 3706

Creating a pattern element in svg using raphael

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?

Upvotes: 1

Views: 1219

Answers (2)

Shakus
Shakus

Reputation: 421

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.

Upvotes: 0

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 60986

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.

Upvotes: 2

Related Questions