Масштабирование рисунка заполнения в 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

Я не знаю, почему, но моя версия библиотеки Рафаэля (я использую новейшую) не ставит идентификатор, описанный @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>

Уведомление несколько вещей:

доступа VML заполнить изображение описано здесь: How to access Raphael fill image in VML
после изменения размера изображения Мне пришлось сбросить ход для версии VML
по какой-то причине JQuery .attr не работает для меня, поэтому я использовал setAttribute (хром)
Я установил preserveAspectRatio для достижения такого же эффекта, как и в VML.Вы можете отключить его, если вы хотите увидеть различия (see documentation)
setTimeout используется ждать изображения для загрузки, так как SVG садилось Params после был загружен образ, и это было перезаписывать мое изменение размера