合并SVG到一起

Question

我有一个SVG，它呈现一些内容，如下(svg-1)，

----------------
| (Image)  Text|
|              |
|              |
|              |
|              |
|              |
|         Text |
----------------

我有一组单独的Svg文档，其中包含一些内容，如下所示(svg-2)

----------------
|              |
|              |
| Some Content |
| here         | 
|              |
|              |
|              |
|              |
----------------

我正在尝试实现的是获得一个组合的svg，如下所示

----------------
| (Image)  Text|
|              |
| Some Content |
| here         |
|              |
|              |
|         Text |
----------------

我相信href标签可以在这里使用，但不太确定这是否是最好的方法，或者如何正确地实现它。

以下是svg-01的代码，也称为svg01.svg

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg width="200mm" height="300mm"
    xmlns="http://www.w3.org/2000/svg" dominant-baseline="hanging">
    <image x="1.74mm" y="1.59mm" height="19.97mm" width="23.41mm" href=".."/>
    <text x="139.85mm" y="1.85mm" font-size="12pt">Text</text>
    <text x="142.05mm" y="289.72mm" font-size="12pt">Text</text>
</svg>

下面是我尝试的组合svg的代码

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg width="300mm" height="200mm"
    xmlns:xlink="http://www.w3.org/1999/xlink>
    xmlns="http://www.w3.org/2000/svg" dominant-baseline="hanging">
    <image xlink:href="svg01.svg" />
    <text x="43.12mm" y="50.54mm" width="73.98mm" height="8.41mm" font-size="12pt">Some Content here</text>
</svg>

这种行为在svg中是可能的吗

实现我的需求的最佳方法是什么？svg是否提供了任何类型的模板功能？我真的很感谢你的帮助

Answer 1

如果您的SVG大小相同，您可以将每个SVG的内容像这样组合在一起。如果您的SVG大小不同或具有不同的视图框，则可能需要进行调整。

第一个SVG

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg width="200mm" height="300mm"
    xmlns="http://www.w3.org/2000/svg" dominant-baseline="hanging">
    <image x="1.74mm" y="1.59mm" height="19.97mm" width="23.41mm" href=".."/>
    <text x="139.85mm" y="1.85mm" font-size="12pt">Text</text>
    <text x="142.05mm" y="289.72mm" font-size="12pt">Text</text>
</svg>

第二个SVG

<svg width="200mm" height="300mm"
    xmlns:xlink="http://www.w3.org/1999/xlink>
    <text x="43.12mm" y="50.54mm" width="73.98mm" height="8.41mm" font-size="12pt">Some Content here</text>
</svg>

组合式SVG

<svg width="200mm" height="300mm"
    xmlns="http://www.w3.org/2000/svg" dominant-baseline="hanging">

    <!-- Content from first SVG -->
    <image x="1.74mm" y="1.59mm" height="19.97mm" width="23.41mm" href=".."/>
    <text x="139.85mm" y="1.85mm" font-size="12pt">Text</text>
    <text x="142.05mm" y="289.72mm" font-size="12pt">Text</text>

    <!-- Content from second SVG -->
    <text x="43.12mm" y="50.54mm" width="73.98mm" height="8.41mm" font-size="12pt">Some Content here</text>
</svg>