Escalando un patrón de relleno en 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);

Mi problema es que el relleno no está escalado con el lienzo svg, por lo que proporcionalmente, termina siendo el doble del tamaño que tenía antes de la escala de la ruta. ¿Hay alguna manera fácil de escalar el patrón de relleno junto con el resto de la svg?Escalando un patrón de relleno en raphael.js

Fuente

2009-07-08 barbarianbob

Es posible hacerlo utilizando solo las funciones de la biblioteca raphael.

Cuando se aplica la función de escala en el objeto de un Rafael, se crea un nuevo nodo SVG, con las coordenadas escala, pero, por desgracia, no modifica las propiedades de relleno

De todos modos, cuando se agrega el atributo " complete "con una url, la biblioteca crea un patrón. Si es el primer atributo de "relleno" que utilice, este patrón se llama raphael-pattern-0 la siguiente se llama raphael-pattern-1, etc ...)

Sabiendo esto, entonces es posible cambiar el atributo del patrón, de acuerdo con el SVG specifications

usted puede obtener los atributos del patrón con document.getElementById("raphael-pattern-0") y cambiar sus propiedades con el setAttribute Por ejemplo (dependiendo de lo que realmente quiere hacer), podría ser algo como:

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

También puede modificar las propiedades x, y, patternUnits y patternContentUnits.

Espero que responda a su pregunta.

Fuente

2009-07-08 17:14:12 ThibThib

No sé por qué, pero mi versión de la biblioteca de Raphael (utilizo la más nueva) no pone la identificación como @ThibThib. Es probablemente porque tenemos 2013 ahora :)

voy a publicar mi solución así:

<!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-b-g/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>

Aviso pocas cosas:

acceder a VML relleno de imagen se describe aquí: How to access Raphael fill image in VML
después de cambiar el tamaño de la imagen tuve que restablecer el trazo para la versión VML
por alguna razón jQuery .attr no funcionó para mí, así que usa setAttribute (Chrome)
puse preserveAspectRatio para lograr mismo efecto que en VML.Se puede desactivar si se desea ver las diferencias (see documentation)
setTimeout se utiliza para esperar a que la imagen que va a cargarse, como SVG se ponía params después de la imagen se cargó, y se sobrescribe mi cambio de tamaño