Question

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

但是，我希望能够通过将子图放入第二个＆lt; svg＆gt;内来自动缩放。标签嵌套在第一个。不幸的是，允许我添加rects和path等的Raphael Paper对象没有添加svgs的选项。

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

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中的其余部分是可见的。但内心的没有。

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

Answer 1

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

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

其中sx是水平刻度金额，sy是垂直刻度金额。插入数字时删除括号。

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

如何在raphael.js文档中添加子svg标记？

1 个答案: