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 Repository

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

The Problem with using 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

我认为最好和最简单的方法是这样做，假设您只需要支持主要浏览器的最新两个主要版本，Android 9 Chrome、iOS 13 Safari，桌面：Chrome、Firefox、Safari、Edge 87。< /p>

1 EDIT：首先压缩所有 SVG，因为它们可能会在 CSS 内部中断，否则使用例如 https://jakearchibald.github.io/svgomg/

2 创建一个单独的样式表并嵌入 svgs：

.icon-1 {
  background-image: url('data:image/svg+xml;utf8,<svg>...</svg>');
}
.icon-2 {
  background-image: url('data:image/svg+xml;utf8,<svg>...</svg>');
}

3 使用 js 延迟加载此样式表 - 因为这些样式表往往会变得非常大并且通常不需要阻止页面的呈现。

我用 # 转义了 %23（不知道是否真的有必要）看起来您不需要需要以其他方式转义常规 svgs - 还没有测试它们是否包含内联样式标签（这些样式无论如何都可以移动到您的样式表中）

Answer 4

你是说你有完全不同的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"); }

或类似的东西。

将多个SVG文件合并为一个

4 个答案: