将多个SVG文件合并为一个

Question

首先我知道有很多类似的问题,但是这些问题似乎都不适合我.我想知道是否有任何方法可以在一个文件中组合多个svg文件.有点像这样:

<svg id="background" ...>
   <svg id="first" ...>
       ...
   </svg>
   <svg id="second" ...>
       ...
   </svg>
   ...
</svg>

是否有某种模板或教程可以帮助我做到这一点？最后,我想使用java和javafx 2.2以编程方式执行此操作.

Thansk提前为您提供帮助!

Answer 1

要以这种方式更改SVG,您应该查看我的SVG堆叠工具.由于SVG是XML,因此可以使用XSLT转换数据:

• SVG Stacking GitHub存储库

更新:正如评论中所指出的,似乎存在一个错误,因此多次请求SVG文件.更多细节和可能的解决方案可以在这里找到:

• 使用SVG Sprites的问题

Answer 2

您可以尝试使用svg-join将多个 SVG 合并到一个符号集合中。

此工具为您创建两个文件。第一个是“svg-bundle.svg”：

<svg ...>
  <symbol id="svg1" ...>
  <symbol id="svg2" ...>
</svg>

每个符号都是您单独的 SVG 文件。

最后一个是“svg-bundle.css”：

.svg_svg1,
.svg_svg2 {
  width: 20px; // for example
  height: 20px;
}

现在你可以在你的 html 中使用它：

<link rel="stylesheet" type="text/css" href="svg-bundle.css" />
...
<svg class="svg_svg1"><use xlink:href="svg-bundle.svg#svg1"></svg>
<svg class="svg_svg2"><use xlink:href="svg-bundle.svg#svg2"></svg>

Answer 3

您是说您拥有完全不同的 SVG 文档吗？在这种情况下，试图将它们塞进一份文档有什么意义呢？我很困惑。

如果您的意思是要将一个 svg 元素包含在另一个元素中，那么这是完全可能的，从这个意义上说，您的示例在语法上是正确的。

如果出于某种原因您确实想在单个 SVG 文档中保存本质上不同的文档，那么我想您可以使用 CSS 来打开和关闭每个文档的显示。

#first, #second { display: none; }
.display-first #first { display: block; }
.display-second #second { display: block; }

function toggle_first () { document.body.classList.toggle("first"); }

或类似的规定。