缩放raphael.js中的填充模式 [英] Scaling a fill pattern in 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的其余部分？

My problem is the fill is not scaled with the svg canvas, so proportionally, it ends up as twice the size it was before the scale of the path. Is there any easy way to scale the fill pattern along with the rest of the svg?

推荐答案

是注释可以通过仅使用raphael库的功能来实现。

It is note possible to do it by using only the functions of the raphael library.

当对拉斐尔的对象应用缩放函数时，会创建一个新的svg节点，坐标但是不幸的是，它不会修改填充属性

When you apply the scale function on a raphael's object, it creates a new svg node, with the coordinates scaled, but unfortunately, it doesn't modify the fill properties

无论如何，当您使用url添加属性fill时，库会创建一个模式。
如果它是您使用的第一个fill属性，则该模式称为 raphael-pattern-0 下一个称为 raphael-pattern-1 等等）

Anyway, when you add the attribute "fill" with an url, the library create a pattern. If it is the first "fill" attribute that you use, this pattern is called raphael-pattern-0 the next one is called raphael-pattern-1, etc...)

知道这一点，然后可以改变模式的属性，根据 SVG规格

Knowing this, it is then possible to change the attribute of the pattern, according to the SVG specifications

您可以使用 document.getElementById（raphael-pattern-0）获取模式的属性，并使用 setAttribute更改其属性例如（取决于你真正想做什么），它可能是这样的：

You can get the attributes of the pattern with document.getElementById("raphael-pattern-0") and change its properties with the setAttribute For example (depending on what you really want to do), it could be something like:

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

You can also modify the x, y, patternUnits and patternContentUnits properties.

希望它会回答你的问题。

Hope it will answer your question.

这篇关于缩放raphael.js中的填充模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！