Snap.svg 載入 svg 檔時的兩三事

使用 Snap.load() 時, 載入的檔案內容會變成 Fragment 物件。而 Fragment 物件只有兩個方法: select() 和 selectAll()。

在載入之後, 即刻使用 select() 可以取得一個 Element 物件; 而使用 selectAll() 是將樹狀結構攤平, 取得符合條件的 Elements, 結果是 type 為 set 的物件 (也可以視為 Array 操作)。

當 Fragment 物件被加到 (append) DOM 裡面時, select() 和 selectAll() 就會失效。文件上敘述的很少, 只寫到 Fragment.select 同 Element.select, Fragment.selectAll 同 Element.selectAll。一開始使用應該很容易踩到這個雷吧。

--- ---

Snap.select() 和 Snap.selectAll() 從整個 Paper 物件去取得 Element(s)。

--- ---

另外, 載入的 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 使用很方便。