Raphael嵌套的SVG元素

Question

尝试使用Raphael实现嵌套的SVG元素。

我认为这个问题与

https://groups.google.com/forum/#!topic/raphaeljs/tzdj3y2DDwg

有什么办法吗？ 谢谢。

Answer 1

实际上，我已经部分实现了嵌套的svg方法。

这是一个简短的示例：

var outer_svg = Raphael(document.getElementById('container'), paper_width, paper_height);
outer_svg.canvas.setAttribute('id', 'outer_svg');
var inner_svg = Raphael(document.getElementById("outer_svg"), paper_width, paper_height/2);
inner_svg.canvas.setAttribute('y', paper_height/2);

在这里，我们创建了inner_svg，该高度是external_svg高度的一半，并位于external_svg的底部。

canvas对象代表svg dom元素。 因此，如果我们给它一个id属性，那么我们就可以将其作为另一个svg的父对象。 并且我们可以设置相对于父级svg元素的x，y坐标。

现在可悲的是：似乎canvas不支持动画方法，因此我们无法为整个svg子元素设置动画。 设置在这里无济于事，因为子svg画布外部的绘图元素部分消失了（应该消失了）。