在raphael.js中缩放填充图案

Question

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的其余部分？

Answer 1

需要注意的是,只使用raphael库的功能即可.

在raphael对象上应用缩放函数时,它会创建一个新的svg节点,其坐标已缩放,但不幸的是,它不会修改填充属性

无论如何,当您使用url添加属性"fill"时,库会创建一个模式.如果它是您使用的第一个"填充"属性,则调用此模式,调用raphael-pattern-0下一个raphael-pattern-1,等等...)

知道了这一点,就可以根据SVG规范更改模式的属性

您可以document.getElementById("raphael-pattern-0")使用setAttribute For 获取模式的属性并更改其属性(根据您真正想要做的事情),它可能是这样的:

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属性.

希望它能回答你的问题.