與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即outer_svg的高度的一半，並且位於outer_svg的底部。

畫布對象表示svg dom元素。所以，如果我們給它一個id屬性，那麼我們可以將它作爲另一個svg的父項。我們可以設置相對於父svg元素的x，y座標。

現在悲傷的部分：似乎canvas不支持動畫方法，所以我們不能動畫整個svg子元素。集合在這裏沒有幫助，因爲繪製在子svg畫布外部的元素部分消失（他們應該）。