1

我正在使用 Raphael.js 从 Javascript 生成 SVG 绘图（实际上是 Coffeescript）

但是，我希望能够包含自动缩放的子图，方法是将它们放在嵌套在第一个标签内的第二个 <svg> 标记中。不幸的是，允许我添加矩形和路径等的 Raphael Paper 对象没有添加 svgs 的选项。

我尝试使用以下代码将标签直接添加到 javascript 中的 DOM：

res = document.createElement("svg")
res.setAttribute("x",x)
res.setAttribute("y",y)
res.setAttribute("width",width)
res.setAttribute("height",height)
res.setAttribute("viewBox","0 0 100 100")
res.innerHTML = someInnerSVG
@paper.canvas.appendChild(res)

这似乎按预期更新了 DOM，将我的新 SVG 标记添加为主要外部 SVG 的子项。然而，这个内在的东西实际上并没有出现在屏幕上。（我的内部 SVG 路径在 0 0 100 100 内缩放，所以在 viewBox 内。）

外部 SVG 中的其余绘图由 Raphael 制作，是可见的。但内在的一无所有。

我正在尝试的应该是可能的吗？知道我做错了什么吗？

4

1 回答 1

0

您应该将这些子元素放入 Raphael 集中。从那里，您将能够对集合应用转换。要转换集合，您将调用该transform()方法并使用s属性：

set.transform('s[sx],[sy]');

其中sx是水平缩放量，sy是垂直缩放量。插入数字时去掉括号。

请参阅此处的文档：http ://raphaeljs.com/reference.html#Element.transform 元素的方法适用于集合，因为集合是伪元素。

于 2013-02-14T21:58:48.737 回答