要使用Snap.SVG加载的外部文件的正确SVG标记

这里是交易，我正在使用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>

但要使其正常工作，我的

元素

必须是

，因此我在

中得到了一个

：

使用快照创建

---

不知怎的，我觉得这有点乱，对吗？或者有更好的方法加载外部SVG文件

我认为这一原则很好，即通常您可能会加载相当多的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 });  
 } );

---

测试示例

我认为原理很好，即通常您可能会加载相当多的SVG，它们需要位于另一个SVG中。另外，Snap.load实际上是获取一个需要附加到某些内容的文档片段。所以对我来说，这是有道理的，但如果你能强调你正因为这个而面临的某些问题，这可能是一个解决办法。谢谢@Ian，我想确保我做的事情是正确的，因为我对这一点非常陌生。现在，我正在尝试找出如何将外部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>

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 });  
 } );