拉斐尔嵌套的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，它是outer_svg高度的一半，位于outer_svg的底部。

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

现在可悲的部分：似乎画布不支持动画方法，因此我们无法为整个svg子元素设置动画。集合在这里没有帮助，因为在子svg画布之外的绘图元素部分消失了（正如它们应该的那样）。