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属性.
希望它能回答你的问题.