Xml 在SVG中嵌入SVG？_Xml_Svg_Embedding

Xml 在SVG中嵌入SVG？

xml svg

Xml 在SVG中嵌入SVG？,xml,svg,embedding,Xml,Svg,Embedding,我有一个SVG文档，我想在其中包含一个外部SVG图像，例如： <object data="logo.svgz" width="100" height="100" x="200" y="400"/> （“对象”只是一个例子——外部文档将是SVG而不是xhtml）有什么想法吗？这可能吗？或者，对我来说，最好的办法是简单地将logo.svg xml插入我的外部svg文档中？使用元素并引用svg文件。为了好玩，将以下内容另存为recursion.svg： <svg width=

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

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

（“对象”只是一个例子——外部文档将是SVG而不是xhtml）

有什么想法吗？这可能吗？或者，对我来说，最好的办法是简单地将logo.svg xml插入我的外部svg文档中？

使用元素并引用svg文件。为了好玩，将以下内容另存为

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

...

演示：

我需要在我的SVG中嵌入SVG，但也需要更改其颜色并应用转换

只有Firefox支持嵌套svg元素的“transform”属性。也不可能更改的颜色。因此，需要将两者结合起来

我最终做了以下几件事

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

这至少适用于Firefox、Chrome和Inkscape

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

我发现使用

标记对嵌入文件进行了低质量的渲染。但是，以下技术起了作用（将SVG文件嵌入到SVG文件中-不一定用于在HTML页面上呈现）：

在文本编辑器中编辑SVG文件
查找元数据的结尾：
```
</metadata>
  <g
   id="layer1"
   inkscape:groupmode="layer"
   inkscape:label="Layer 1">
```
换言之：
```
<use xlink:href="OTHERFILE.svg#layer1" sodipodi:insensitive="true" y="0" x="0" />
```
注意
```
xlink:href
```
已经存在，只需使用
```
href
```
即可，例如
```
视图框
```
、
```
宽度
```
和
```
高度
```
值（在本答案中）仅用于图示，请相应调整布局（）
由于
为
，这意味着它不支持SVG样式，如中所述。例如，如果我有以下css行将svg形状颜色设置为与字体颜色相同
```
svg{
填充：当前颜色；
}
```
如果使用
，则上述样式不适用。为此，需要使用
，如中所示
注意：他的答案中的值是强制性的
这意味着您必须将
```
id
```
属性添加到外部svg文件中，因此您需要自己（您的网站）或其他地方托管（修改）的外部svg文件。生成的外部svg文件如下所示（注意我将
```
id
```
）放在哪里：
id的值可以是任何值，我在本例中使用“logo”
要嵌入svg
如果您在html中内联使用上述svg，则不需要xmlns属性（至少我从中了解到）。
使用svg
标记嵌入额外的svg如何？
谢谢，出于某种原因，我在发布此问题后才开始搜索。我注意到，要渲染图像，必须有宽度和高度。一个有趣的观察结果是：最新版本的Firefox、Chrome和Safari都只显示了一级递归（两点）。但是，如果您将上述内容另存为“a.svg”，并将图像更改为“b.svg”，然后将其另存为“b.svg”，图像引用为“a.svg”，那么每次重新加载交替文件时，Firefox都会显示额外的递归级别。每次加载文件时，它都会缓存结果，更深一层。@SVG元素本身没有样式属性；而是SVG元素中的项目具有样式。但是，当使用SVG中的
（或HTML中的
或
）引用SVG文件时，您无权访问底层DOM。因此，不可以，您不能在已被
@proteneer
引用的SVG元素中设置元素的样式。（如果您使用JavaScript设置
```
href
```
属性，则无需转义
```
，现在您只需使用href。是否可以更新您的答案以包含该属性？@toshi您有其他答案示例吗？我正在尝试，但未能实现您的建议。我的“外部”SVG设置了一个圆圈和渐变。我的内部VG是一个对象。独立的内部SVG可以按预期工作。但是内部SVG在我的建议实现中没有显示。因此，我请求查看另一个示例。+1用于提及一个自包含的替代方案。这种嵌入式SVG的定位/大小如何工作？我想补充一点，您可以将转换添加到此元素t：平移、旋转等。通过这种方式，您可以动态地重新定位元素，例如，要移动您要编写的元素：……viewBox不是必需的，如果忽略它，您将获得不同的布局，在某些情况下，这可能是您想要的。Safari刚刚开始支持href。@WilliamEntriken您所说的什么“外部文件”？我描述的方法使用外部文件，即包含其他内容的文件。该填充模式非常完美，谢谢。对于较小的插入或较小的视口，编码人员可能希望以相同的方式减少所有宽度和高度。
sodipodi:insensitive="true" 

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