34

首先，我知道有很多类似的问题，但似乎没有一个对我有用。我想知道是否有任何方法可以将多个 svg 文件合并到一个文件中。有点像这样：

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

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

4

6 回答 6

8

要以这种方式更改 SVG，您应该查看我的 SVG Stacking Tool。由于 SVG 是 XML，因此可以使用 XSLT 来转换数据：

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

于 2013-03-03T22:46:48.833 回答
5

您可以尝试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>
于 2016-08-28T17:18:43.823 回答
1

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

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

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

.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（不知道是否真的有必要），似乎您不需要以其他方式转义常规 svg - 虽然没有测试它们是否包含内联样式标签（这些样式无论如何都可以移动到您的样式表中）

于 2021-02-11T10:19:45.920 回答
1

在搜索了大量资源后，我发现有一个非常方便的 python 解决方案：https ://github.com/astraw/svg_stack

假设你手头有两个 svg 文件，11.svg 12.svg，你可以做的是：

python svg_stack.py --direction=h --margin=100 11.svg 12.svg > 1.svg

您可能认为有 6 个 svg 文件以这种方式布局：

11 12
21 22
31 32

您可以执行以下步骤：

# merge 11 12
python svg_stack.py --direction=h --margin=100 11.svg 12.svg > 1.svg
# merge 21 22
python svg_stack.py --direction=h --margin=100 21.svg 22.svg > 2.svg
# merge 31 32
python svg_stack.py --direction=h --margin=100 31.svg 32.svg > 3.svg
# merge all
python svg_stack.py --direction=v --margin=100 1.svg 2.svg 3.svg > final.svg

请注意，您可以使用v和更改合并方向h

于 2021-12-18T00:20:31.983 回答
0

我使用了 Victor gem https://github.com/DannyBen/victor

first_svg = File.open("first.svg").read
second_svg = File.open("second.svg").read

first_content = first_svg.split("\n")[1..-2].join(", ")
second_content = second_svg.split("\n")[1..-2].join(", ")

svg = Victor::SVG.new width: "100%", height: "100%"
svg << first_content
svg << second_content

svg.save 'final.svg'
于 2021-12-06T12:47:25.667 回答
-8

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

或类似的规定。

于 2013-01-28T14:11:24.207 回答