正確的SVG標記用來裝載Snap.svg

Question

所以這裏的交易，我正在做一些實驗用SVG和Snap.svg。我有一個外部SVG文件，logo.svg，這是與Adobe Illustrator中創建，這裏的標記：

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="161.875px" height="144px" viewBox="0 0 161.875 144" enable-background="new 0 0 161.875 144" xml:space="preserve"> 
<polygon fill="#006098" points="144,144 27,144 57,0 144,0 144,54 161.875,72 144,90 "/> 
<polygon fill="#00416A" points="57,144 0,144 0,0 87,0 "/> 
<polygon fill="#98D5E9" points="72,57 72,27 87,27 117,27 117,57 117,72 117,94.5 117,117 87,117 87,94.5 57,94.5 57,72 87,72 
    87,57 "/> 
<polygon fill="#288DC1" points="57,57 75.125,57 81.375,27 57,27 27,27 27,57 27,72 27,94.5 27,117 57,117 57,94.5 67.313,94.5 
    72,72 57,72 "/> 
</svg> 

我想用這個例子，並探索Snap.svg動畫，所以我加載它這種方式：

(...) 
var s = Snap(element); 
Snap.load('/images/logo.svg', function(f) { 
    s.append(f); 
}); 
(...) 

但是這個工作我element必須是<svg>，所以我結束了一個<svg>內<svg>：

<svg logo-svg> 
    <desc>Created with Snap</desc> 
    <defs></defs> 
    <svg version="1.1" id="Layer_1" x="0px" y="0px" width="161.875px" height="144px" viewBox="0 0 161.875 144" enable-background="new 0 0 161.875 144" preserveAspectRatio="xMinYMin meet"> 
    <polygon fill="#006098" points="144,144 27,144 57,0 144,0 144,54 161.875,72 144,90 "></polygon> 
    <polygon fill="#00416A" points="57,144 0,144 0,0 87,0 "></polygon> 
    <polygon fill="#98D5E9" points="72,57 72,27 87,27 117,27 117,57 117,72 117,94.5 117,117 87,117 87,94.5 57,94.5 57,72 87,72 
    87,57 "></polygon> 
    <polygon fill="#288DC1" points="57,57 75.125,57 81.375,27 57,27 27,27 27,57 27,72 27,94.5 27,117 57,117 57,94.5 67.313,94.5 
    72,72 57,72 "></polygon> 
    </svg> 
</svg> 

不知何故我填充這有點亂，這是正確的嗎？或者有更好的方法來加載外部文件SVG？

Answer 1

我認爲這個原則很好，也就是說，你可能會加載不少SVG，而且他們需要在另一個SVG中。

另外Snap.load實際上是採取一個文件片段，需要附加的東西。所以對我來說這是有道理的，但如果你能突出顯示你正面臨的某些問題，那麼可能會有一種解決方法。

我只是要發佈一個例子來調整主文件到新的SVG它可以用來...

var s = Snap("#svgpaper"); 
var bird = Snap.load("bird.svg", function (loadedFragment) { 
      var b = s.append(loadedFragment); 
      var bbox = b.getBBox(); 
      var vbox = bbox.x + " " + bbox.y + " " + bbox.width + " " + bbox.height;           
      s.attr({ viewBox: vbox }); 
}); 

測試例如here