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

我的问题是填充没有用svg画布缩放,因此按比例,它最终是路径缩放之前的两倍.
有没有简单的方法来缩放填充模式以及svg的其余部分？

解决方法

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

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

无论如何,当您使用url添加属性“fill”时,库会创建一个模式.
如果它是您使用的第一个“填充”属性,则此模式称为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属性.

希望它能回答你的问题.

原文地址：https://www.jb51.cc/js/150754.html