Mise à l'échelle d'un motif de remplissage dans 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); 

Mon problème est que le remplissage n'est pas mis à l'échelle avec la toile svg, de manière proportionnelle, il finit par être le double de la taille avant l'échelle du chemin. Existe-t-il un moyen simple d'équilibrer le modèle de remplissage avec le reste du svg?

Il est possible de le faire en utilisant uniquement les fonctions de la bibliothèque raphael.

Lorsque vous appliquez la fonction d'échelle sur l'objet d'un raphael, il crée un nouveau noeud svg, avec les coordonnées mises à l'échelle, mais malheureusement, il ne modifie pas les propriétés de remplissage

Quoi qu'il en soit, lorsque vous ajoutez l'attribut "remplir" avec une URL, la bibliothèque crée un motif. Si c'est le premier attribut "remplissage" que vous utilisez, ce modèle s'appelle raphael-pattern-0 le prochain s'appelle raphael-pattern-1 , etc.)

En sachant cela, il est alors possible de modifier l'attribut du motif, selon les spécifications SVG

Vous pouvez obtenir les attributs du motif avec document.getElementById("raphael-pattern-0") et modifier ses propriétés avec setAttribute Par exemple (selon ce que vous voulez vraiment faire), il pourrait s'agir de:

 var pat = document.getElementById("raphael-pattern-0"); pat.setAttribute("height", pat.getAttribute("height")*0.5); pat.setAttribute("width", pat.getAttribute("width")*0.5); 

Vous pouvez également modifier les propriétés x , y , patternUnits et patternContentUnits .

J'espère que cela répondra à votre question.

Je ne sais pas pourquoi, mais ma version de la bibliothèque Raphael (j'utilise la plus récente) ne met pas l'ID comme décrit par @ThibThib. C'est probablement parce que nous avons 2013 maintenant 🙂

Je publierai également ma solution:

 <!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> 

Remarquez quelques choses:

  • L'accès à l'image de remplissage VML est décrit ici: Comment accéder à Raphael fill image in VML

  • Après avoir changé la taille de l'image, j'ai dû réinitialiser le cycle pour la version VML

  • Pour une raison quelconque jQuery .attr n'a pas fonctionné pour moi, alors j'ai utilisé setAttribute (Chrome)

  • J'ai configuré preserveAspectRatio pour obtenir le même effet que dans VML. Vous pouvez le désactiver si vous voulez voir les différences ( voir la documentation )

  • setTimeout est utilisé pour attendre que l'image soit chargée, car SVG a configuré des paramètres après l'importation de l'image, et il écrasait mon changement de taille

Vous pouvez bien sûr jouer avec différents paramètres aussi:

Documentation de l'élément de remplissage VML

Patterns SVG

SVG Image element