在SVG中嵌入SVG？

Question

我有一个SVG文档,我想在其中包含一个外部svg图像,例如:

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

("对象"只是一个例子 - 外部文档将是SVG而不是xhtml).

有任何想法吗？这甚至可能吗？或者对我来说最简单的方法是将logo.svg xml打到我的外部SVG文件中？

Answer 1

使用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>

Answer 2

或者您可以实际将子svg嵌入父svg中,如下所示:

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

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

Answer 3

值得一提的是,当您将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>

现在您的鼠标事件不会陷入透明图像方块!

Answer 4

我发现使用该<image>标签给出了嵌入文件的低质量渲染。但是，以下技术有效（将 SVG 文件嵌入到 SVG 文件中 - 不一定用于在 HTML 页面上呈现）：

• 在文本编辑器中编辑 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 中打开该文件。

此技术对于在每个页面上都有标准背景或徽标很有用。通过将它首先放在文件中，它将首先呈现（因此在底部）。您还可以通过添加此属性来锁定它：

sodipodi:insensitive="true" 

换句话说：

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

Answer 5

注意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>

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

要嵌入该 svg，

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

如果您在 html 中使用上面的 svg 作为内联，则不需要 xmlns 属性（至少我从svgo 中知道的）。

Answer 6

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

只有 Firefox 支持嵌套 svg 元素上的“transform”属性。也无法更改 <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 的行为相同，但您现在可以对其应用转换。