Ridimensionamento di un motivo di riempimento 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);

Il mio problema è che il riempimento non è ridimensionato con la tela svg, quindi in proporzione, finisce con il doppio delle dimensioni che era prima della scala del percorso. C'è un modo semplice per ridimensionare il pattern di riempimento insieme al resto dello svg?Ridimensionamento di un motivo di riempimento in raphael.js

fonte

2009-07-08 barbarianbob

È possibile farlo utilizzando solo le funzioni della libreria Raphael.

Quando si applica la funzione di scala oggetto di un Raffaello, si crea un nuovo nodo SVG, con le coordinate scalati, ma purtroppo, non modifica le proprietà di riempimento

In ogni caso, quando si aggiunge l'attributo " riempire "con un url, la libreria crea un pattern. Se è la prima "riempire" attributo che si utilizza, questo modello si chiama raphael-pattern-0 quello successivo è chiamato raphael-pattern-1, ecc ...)

Sapendo questo, è poi possibile modificare l'attributo del modello, secondo il SVG specifications

è possibile ottenere gli attributi del modello con il document.getElementById("raphael-pattern-0") e modificarne le proprietà con il setAttribute per esempio (a seconda di ciò che si vuole veramente fare), potrebbe essere qualcosa di simile:

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

È anche possibile modificare le proprietà x, , patternUnits e patternContentUnits.

Spero che risponda alla tua domanda.

fonte

2009-07-08 17:14:12 ThibThib

Non so perché ma la mia versione della libreria Raphael (utilizzo più recente) non inserisce ID come descritto in @ThibThib. E 'probabilmente perché abbiamo 2013 ora :)

Io posto la mia soluzione così:

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

Avviso poche cose:

accesso VML riempire immagine è descritto qui: How to access Raphael fill image in VML
dopo aver modificato la dimensione dell'immagine Ho dovuto ripristinare la corsa per la versione VML
per qualche motivo jQuery .attr non ha funzionato per me, quindi ho usato setAttribute (Chrome)
ho impostato preserveAspectRatio per ottenere lo stesso effetto come in VML.È possibile disattivare, se volete vedere le differenze (see documentation)
setTimeout viene utilizzato per attendere per un'immagine da caricare, come SVG tramontava params dopo immagine è stata caricata, ed è stato sovrascrive la mia taglia cambiamento