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

我的问题是填充不是用svg画布缩放的，所以按比例它最终是路径缩放之前的两倍大小。是否有任何简单的方法来缩放填充模式以及其余的svg？在raphael.js中缩放填充图案

来源

2009-07-08 barbarianbob

请注意，只能使用raphael库的功能。

当您将拉斐尔的对象上规模的功能，它会创建一个新的SVG节点，坐标缩放，但不幸的是，它不修改填充属性

无论如何，当你添加属性“填充“一个url，库创建一个模式。如果您使用的第一个“补”的属性，这种模式被称为raphael-pattern-0下一个被称为raphael-pattern-1，等...）

认识到这一点，则有可能改变格局的属性，根据SVG specifications

您可以document.getElementById("raphael-pattern-0")得到该模式的属性和（取决于你真正想做的事）与setAttribute 例如改变它的属性，它可能是这样的：

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

您还可以修改x,y,patternUnits和patternContentUnits属性。

希望它能回答你的问题。

来源

2009-07-08 17:14:12 ThibThib

我不知道为什么，但我的拉斐尔图书馆版本（我使用最新版本）没有把ID作为@ThibThib描述。这可能是因为我们有2013现在:)

我会后我的解决方案，以及：

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

注意几件事情：