javascript - 如何在 raphael.js 文档中添加子 svg 标签？

Question

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

但是，我希望能够通过将子图放入嵌套在第一个标签内的第二个

我尝试使用以下代码将标签直接添加到 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 生成的绘图的其余部分是可见的。但内在的一切都不是。

我正在尝试的事情应该可行吗？知道我做错了什么吗？

Answer 1

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

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

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

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