在 SVG 中嵌入 SVG? ？

我有一个 SVG 文档，我想在其中包含一个外部 SVG 图像，比如:

<object data="logo.svgz" width="100" height="100" x="200" y="400"/>

(“ object”只是一个例子-外部文档将是 SVG 而不是 xhtml)。

有什么想法吗？这有可能吗？或者对我来说最好的方法就是将 logo.SVG xml 直接插入到我的外部 SVG 文档中？

126377 次浏览
小开
最佳答案

使用 image元素并引用您的 SVG 文件:

<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="-50" cy="-50" r="30" style="fill:red" />
<image x="10" y="20" width="80" height="80" href="recursion.svg" />
</svg>
小开

值得一提的是，当您将 SVG 嵌入另一个 SVG 时，可以使用:

<image x="10" y="20" width="80" height="80" xlink:href="image.svg" />

然后嵌入的 SVG 采用给定尺寸的 长方形形状。

也就是说，如果嵌入的 SVG 是一个圆形或其他形状，而不是一个正方形，那么它就变成了一个具有透明度的正方形。因此，鼠标事件被困在嵌入的正方形中，不能到达父 SVG。小心点。

一个更好的方法是使用一种模式。要填充一个形状，无论是一个圆形，一个正方形，甚至一条路径。

<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 嵌入到父 svg 中:

<svg>
<g>
<svg>
...
</svg>
</g>
</svg>

演示:
Http://hitokun-s.github.io/old/demo/path-between-two-svg.html

小开

我需要在我的 SVG 中嵌入一个 SVG，但是也需要改变它的颜色并应用转换。

只有 Firefox 支持嵌套 svg 元素上的“ change”属性。更改 < image > 的颜色也是不可能的。因此，两者的结合是必要的。

我最后做了以下几件事

<svg>
<image x="0" y="0" xlink:href="data:image/svg+xml;base64,[base64 of nested svg]"></image>
</svg>

这至少可以在 Firefox，Chrome 和 Inkscape 上使用。

这与父 svg 应答中的子 svg 的行为相同，但是您现在可以对它应用转换了。

小开

我发现使用 <image>标记可以渲染低质量的嵌入文件。然而，下面的技术起作用了(将一个 SVG 文件嵌入到一个 SVG 文件中——不一定要在 HTML 页面上呈现) :

  • 在文本编辑器中编辑 SVG 文件。

  • 查找元数据的结尾:

    </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.

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"

换句话说:

<use xlink:href="OTHERFILE.svg#layer1" sodipodi:insensitive="true" y="0" x="0" />
小开

注意，xlink:href已经是 不赞成，只需使用 href，例如。

<svg viewBox="0 0 512 512">
<image width="512" height="512" href="external.svg"/>
</svg>

viewBox，width和 height值(在这个答案中)只是为了说明的目的，相应地调整布局(继续读)。

因为 <image> 类似规格的股票作为 <img>，这意味着它不支持 SVG 样式，正如在 克里斯蒂安的回答中提到的。例如，如果我有下面的 css 行，它将 svg 形状颜色设置为与字体颜色相同,

svg {
fill: currentColor;
}

如果使用 <image>，上面的样式将不适用。为此，您需要使用 <use>，如 尼克的回答所示。

注意他答案中的 id="layer1"和 href="OTHERFILE.svg#layer1"值是 强制性的。

这意味着您必须将 id属性添加到外部 svg 文件中，因此您需要自己(您的网站)或在其他地方托管(修改后的)外部 svg 文件。生成的外部 svg 文件如下所示(请注意我将 id放在哪里) :

<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="..."/>
</svg>

身份证的值可以是任何值，我在这个例子中使用了“ logo”。

为了嵌入 svg,

<svg viewBox="0 0 512 512">
<use href="edited-external.svg#logo"/>
</svg>

如果在 html 中使用上面的 svg 作为内联，则不需要 xmlns 属性(至少我从 Svgo中了解到这一点)。

小开

如何使用 SVG<use>标记来嵌入额外的 SVG？

小开

很简单

<image x="120" y="720" width="1000" height="900" href="assets/img/image.svg" />

提交答案