在載入之後, 即刻使用 select() 可以取得一個 Element 物件; 而使用 selectAll() 是將樹狀結構攤平, 取得符合條件的 Elements, 結果是 type 為 set 的物件 (也可以視為 Array 操作)。
當 Fragment 物件被加到 (append) DOM 裡面時, select() 和 selectAll() 就會失效。文件上敘述的很少, 只寫到 Fragment.select 同 Element.select, Fragment.selectAll 同 Element.selectAll。一開始使用應該很容易踩到這個雷吧。
--- ---
--- ---
另外, 載入的 svg 檔通常最外層就是一個 <svg> 標籤, 我們可以將這個 Fragment 物件直接放到一個 g element 裡, 操作 g element 就可以改變整個載入的圖形。svg 標籤可以是多層的結構。
Snap.load("some.svg", function(fragment) {
var wrapper = paper.g();
wrapper.append(fragment).drag().transform('t200,100s1.2');
});--- ---
最外層的 <svg> 標籤稱為 Paper 物件。Paper 物件的行為和 Element 類似, 但目前建立 Element 物件只能使用 Paper 物件 (例如: Paper.g(), Paper.rect() 等)。
--- ---
Element 物件的屬性:
node 指向 DOM element object (用 setAttribute() 可以設定 id 屬性)
paper 指向 Paper 物件
type 為標籤名稱 (字串)
id
--- ---
有時搭配 jQuery 使用很方便。
