Объединение нескольких файлов SVG в один

Прежде всего, я знаю, что таких вопросов очень много, но никто из них, похоже, не делает этого. Я хотел бы знать, есть ли способ объединить несколько файлов svg в одном файле. Примерно так:

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

Есть ли какой-то шаблон или учебник, который помогает мне это сделать? В конце я хочу сделать это программно, используя java und javafx 2.2.

Танск заранее за вашу помощь!

Ответ 1

Чтобы сменить SVG именно таким образом, вы должны проверить мой SVG Stacking Tool. Поскольку SVG являются XML, для преобразования данных можно использовать XSLT:

Обновление: Как указано в комментариях, кажется, что есть ошибка, поэтому файл SVG запрашивается несколько раз. Более подробную информацию и возможное решение можно найти здесь:

Проблема с использованием SVG-спрайтов

Ответ 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>

Ответ 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"); }

или что-то в этом роде.