xml 在 SVG 中嵌入 SVG？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5451135/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Embed SVG in SVG?
提问by Marcin
I have an SVG document, and I would like to include an external svg image within it, i.e. something like:
我有一个 SVG 文档，我想在其中包含一个外部 svg 图像，例如：
<object data="logo.svgz" width="100" height="100" x="200" y="400"/>
("object" is just an example - the outer document will be SVG rather than xhtml).
（“对象”只是一个例子 - 外部文档将是 SVG 而不是 xhtml）。
Any ideas? Is this even possible? Or is the best thing for me to simply slap the logo.svg xml into my outer SVG document?
有任何想法吗？这甚至可能吗？或者对我来说，最好的办法是将 logo.svg xml 放入我的外部 SVG 文档中？
回答by Phrogz
Use the imageelement and reference your SVG file. For fun, save the following as recursion.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>
回答by toshi
Or you can actually embed child svg in parent svg like this:
或者您实际上可以像这样将子 svg 嵌入到父 svg 中：
<svg>
<g>
<svg>
...
</svg>
</g>
</svg>
demo:
http://hitokun-s.github.io/old/demo/path-between-two-svg.html
演示：http:
//hitokun-s.github.io/old/demo/path-between-two-svg.html
回答by oabarca
It is worth mentioning that when you embed SVGs into another SVG with:
值得一提的是，当您将 SVG 嵌入到另一个 SVG 时：
<image x="10" y="20" width="80" height="80" xlink:href="image.svg" />
then the embedded SVG takes a rectangularshape with given dimensions.
然后嵌入的SVG采用给定尺寸的矩形形状。
That is to say, if your embedded SVG is a circle or some shape other than a square, then it becomes a square with transparency. Therefore, mouse events get trapped into that embeded square and do not reach the parent SVG. Watch out for that.
也就是说，如果你嵌入的 SVG 是一个圆形或一些不是正方形的形状，那么它就变成了一个具有透明度的正方形。因此，鼠标事件被困在那个嵌入的方块中并且不会到达父 SVG。请注意这一点。
A better approach is using a pattern. To fill a shape, either a circle, a square or even a 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>
Then use the pattern like this:
然后使用这样的模式：
<circle cx="0" cy="0" r="250" fill="url(#pat)"></circle>
Now your mouse events do not get stuck into transparent image squares!
现在您的鼠标事件不会卡在透明的图像方块中！
回答by Nick Gammon
I found that using the <image>tag gave a low-quality render of the embedded file. However the following technique worked (to embed an SVG file inside an SVG file - not necessarily for rendering on an HTML page):
我发现使用该<image>标签给出了嵌入文件的低质量渲染。但是，以下技术有效（将 SVG 文件嵌入到 SVG 文件中 - 不一定用于在 HTML 页面上呈现）：
Edit the SVG file in a text editor.
Find the end of the metadata:
</metadata> <g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1">Insert this line after that group tag:
<use xlink:href="OTHERFILE.svg#layer1" y="0" x="0" />In this case we are including OTHERFILE.svg into the file, and all of layer1 (the first and default layer).
Save this and then open the file in Inkscape.
在文本编辑器中编辑 SVG 文件。
找到元数据的结尾：
</metadata> <g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1">在该组标签之后插入这一行：
<use xlink:href="OTHERFILE.svg#layer1" y="0" x="0" />在这种情况下，我们将 OTHERFILE.svg 包括到文件中，以及所有 layer1（第一层和默认层）。
保存此文件，然后在 Inkscape 中打开该文件。
This technique is useful for having a standard background or logo on every page. By putting it first in the file it will be rendered first (and thus at the bottom). You could also lock it by adding this attribute:
此技术对于在每个页面上都有标准背景或徽标很有用。通过将它首先放在文件中，它将首先呈现（因此在底部）。您还可以通过添加此属性来锁定它：
sodipodi:insensitive="true"
In other words:
换句话说：
<use xlink:href="OTHERFILE.svg#layer1" sodipodi:insensitive="true" y="0" x="0" />
回答by Christiaan
I needed to embed a SVG in my SVG but also change its color and apply transforms.
我需要在我的 SVG 中嵌入一个 SVG，但还要改变它的颜色并应用转换。
Only Firefox supports the "transform" attribute on the nested svg elements. Changing the color of <image> is also not possible. So a combination of both was needed.
只有 Firefox 支持嵌套 svg 元素上的“transform”属性。也无法更改 <image> 的颜色。所以需要两者的结合。
What I ended up doing was the following
我最终做的是以下
<svg>
<image x="0" y="0" xlink:href="data:image/svg+xml;base64,[base64 of nested svg]"></image>
</svg>
This works on at least Firefox, Chrome and Inkscape.
这至少适用于 Firefox、Chrome 和 Inkscape。
This behaves the same as the child svg in the parent svg answer with the exception that you can now apply transforms on it.
这与父 svg 答案中的子 svg 的行为相同，但您现在可以对其应用转换。
回答by Saftever
Note xlink:hrefhas been deprecated, just use hrefinstead, e.g.
注意xlink:href已被弃用，请href改用，例如
<svg viewBox="0 0 512 512">
<image width="512" height="512" href="external.svg"/>
</svg>
viewBox, widthand heightvalues (in this answer) are simply for illustration purpose, adjust the layout accordingly (read more).
viewBox，width和height值（在这个答案中）仅用于说明目的，相应地调整布局（阅读更多）。
Since <image>shares similar specas <img>, meaning it doesn't support SVG styling, as mentioned in Christiaan's answer. For example, if I have the following css line that set the svg shape color to be the same as the font color,
由于<image>股类似规格的<img>，这意味着它不支持SVG的造型，正如上文克里斯蒂安的答案。例如，如果我有以下 css 行将 svg 形状颜色设置为与字体颜色相同，
svg {
fill: currentColor;
}
The above style wouldn't apply if <image>is used. For that, you need to use <use>, as shown in Nick's answer.
如果<image>使用，则上述样式将不适用。为此，您需要使用<use>，如尼克的回答所示。
Note id="layer1"and href="OTHERFILE.svg#layer1"values in his answer are mandatory.
他的回答中的注释id="layer1"和href="OTHERFILE.svg#layer1"值是强制性的。
Meaning you have to add the idattribute to the external svg file, so you need to host the (modified) external svg file by yourself (your website) or somewhere else. The resulting external svg file looks like this (notice where I put the id):
这意味着您必须将id属性添加到外部 svg 文件，因此您需要自己（您的网站）或其他地方托管（修改后的）外部 svg 文件。生成的外部 svg 文件如下所示（注意我把 放在哪里id）：
<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="..."/>
</svg>
The value of idcan be anything, I use "logo" in this example.
id的值可以是任何值，我在这个例子中使用了“logo”。
To embed that svg,
要嵌入该 svg，
<svg viewBox="0 0 512 512">
<use href="edited-external.svg#logo"/>
</svg>
If you use the above svg as inline in your html, you don't need xmlns attribute (at least what I know from svgo).
如果您在 html 中使用上面的 svg 作为内联，则不需要 xmlns 属性（至少我从svgo 中知道的）。
