It is note possible to do it by using only the functions of the raphael library.
When you apply the scale function on a raphael's object, it creates a new svg node, with the coordinates scaled, but unfortunately, it doesn't modify the fill properties
Anyway, when you add the attribute "fill" with an url, the library create a pattern.
If it is the first "fill" attribute that you use, this pattern is called raphael-pattern-0
the next one is called raphael-pattern-1
, etc...)
Knowing this, it is then possible to change the attribute of the pattern, according to the SVG specifications
You can get the attributes of the pattern with document.getElementById("raphael-pattern-0")
and change its properties with the setAttribute
For example (depending on what you really want to do), it could be something like:
var pat = document.getElementById("raphael-pattern-0");
pat.setAttribute("height", pat.getAttribute("height")*0.5);
pat.setAttribute("width", pat.getAttribute("width")*0.5);
You can also modify the x
, y
, patternUnits
and patternContentUnits
properties.
Hope it will answer your question.