将SVGembedded到SVG中？
我有一个SVG文件，我想在其中包含一个外部的SVG图像，例如：
<object data="logo.svgz" width="100" height="100" x="200" y="400"/> （“对象”只是一个例子 – 外部文档将是SVG而不是xhtml）。
有任何想法吗？ 这甚至有可能吗？ 或者，对我来说，最简单的方法是将logo.svg xml放入我的外部SVG文档中？
使用image元素并引用您的SVG文件。 为了好玩，将以下内容保存为recursion.svg ：
<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="-50" cy="-50" r="30" style="fill:red" /> <image x="10" y="20" width="80" height="80" xlink:href="recursion.svg" /> </svg>
或者你可以像这样在父类svg中实际embedded子svg：
<svg> <g> <svg> ... </svg> </g> </svg>
演示：
http://hitokun-s.github.io/demo/path-between-two-svg.html
值得一提的是，当您将SVGembedded到另一个SVG中时：
<image x="10" y="20" width="80" height="80" xlink:href="image.svg" />
那么embedded的SVG就是一个具有给定尺寸的矩形形状。
也就是说，如果你的embedded式SVG是一个圆形或者一个正方形以外的形状，那么它就变成了一个具有透明度的正方形。 因此，鼠标事件被困在embedded的方块中，而不会到达父SVG。 小心那个
更好的方法是使用模式。 填充一个形状，无论是一个圆形，一个方形，甚至一个path。
<defs> <pattern id="pat" x="0" y="0" width="500" height="500" patternUnits="userSpaceOnUse"> <image x="0" y="0" width="500" height="500" xlink:href="images/mysvg.svg"></image> </pattern> </defs>
然后使用这样的模式：
<circle cx="0" cy="0" r="250" fill="url(#pat)"></circle>
现在，您的鼠标事件不会陷入透明的图像广场！
我需要在我的SVG中embedded一个SVG，但也要改变它的颜色并应用转换。
只有Firefox支持嵌套的svg元素上的“transform”属性。 改变<image>的颜色也是不可能的。 所以需要两者的结合。
我最终做的是以下
<svg> <image x="0" y="0" xlink:href="data:image/svg+xml;base64,[base64 of nested svg]"></image> </svg>
这至less适用于Firefox，Chrome和Inkscape。
这与父svg答案中的子svg行为相同，只是现在可以对其应用转换。
