Geek Answers Handbook

Scaling the fill pattern in raphael.js

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);

My problem is that the fill does not scale with the svg canvas, so proportionally it ends in twice as much as the size of the path scale. Is there an easy way to scale the fill pattern along with the rest of svg?

+6
javascript design-patterns scale fill raphael
source share
2 answers

This can be noted using only the functions of the raphael library.

When applying the scaling function to the raphael object, a new svg node is created with coordinate scaling, but, unfortunately, it does not change the fill properties

In any case, when you add the attribute "fill" with url, the library creates a template. If this is the first “fill” attribute you use, this pattern is called raphael-pattern-0 , the next is called raphael-pattern-1 , etc.)

Knowing this, then you can change the template attribute in accordance with the SVG specifications

You can get the template attributes using document.getElementById("raphael-pattern-0") and change its properties using 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 change the x , y , patternUnits and patternContentUnits .

I hope he answers your question.

+7
source share

I don’t know why, but my version of the Raphael library (I use the latest) does not put the identifier described in @ThibThib. Probably because we have 2013 now :)

I will also post my decision:

 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>Raphael Test</title> <script type="text/javascript" src="js/libs/jquery.js"></script> <script type="text/javascript" src="js/libs/raphael.js"></script> </head> <body> <div id="raphael"></div> <script type="text/javascript"> $(document).ready(function() { var raphael, path, pattern; raphael = Raphael(document.getElementById('raphael'), 500, 500); path = raphael.circle(200, 200, 180); path.attr('stroke', '#000000'); path.attr('stroke-width', 3); path.attr('stroke-opacity', 1); path.attr('fill', 'url(http://3.bp.blogspot.com/_M4WdA9j-bg/TLMF9JJJwcI/AAAAAAAAAV4/p0Y_Wo3S3sQ/s1600/Landscape1.jpg)'); pattern = $(path.node).attr('fill'); if(pattern) { pattern = pattern.replace('url(', '').replace(')', ''); pattern = $(pattern); } // Shape element documentation: http://msdn.microsoft.com/en-us/library/hh846327(v=vs.85).aspx#shape_element // Fill element documentation: http://msdn.microsoft.com/en-us/library/bb229596(v=vs.85).aspx setTimeout(function() { if(Raphael.vml) { // SVG not supported (IE7 & IE8) and it doesn't work :/ var html = $(path.node).html(); html = html.replace(/rvml:/g, ''); // remove prefix html = html.replace(/ = /g, '='); html = html.substr(html.indexOf('/>') + 2); // remove xml element var src = ''; $(html).each(function() { if($(this).prop("tagName") == 'FILL') { src = $(this).attr('src'); } }); if(src != '') { var html = $(path.node).html(); html = html.replace(src, src + '" size="50,50'); $(path.node).html(html); path.attr('stroke', '#000000'); path.attr('stroke-width', 3); path.attr('stroke-opacity', 1); } } else { // SVG supported and it prints correct URL $(pattern)[0].setAttribute('width', 50); $(pattern)[0].setAttribute('height', 50); $(pattern).find('image')[0].setAttribute('width', 50); $(pattern).find('image')[0].setAttribute('height', 50); $(pattern).find('image')[0].setAttribute('preserveAspectRatio', 'defer none meet'); } }, 1000); }); </script> </body> </html>

Pay attention to a few things:

  • Access to filling VML images is described here: How to get Raphael fill image in VML

  • after resizing the image, I had to reset the bar for the VML version

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

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

  • setTimeout used to wait for the image to load, since the SVG set the parameters after the image was loaded and resized

Of course, you can play with different settings:

FML VML Documentation Documentation

SVG Templates

SVG Image Element

+3
source share

More articles:


All Articles