Я хотел бы взять один небольшой файл SVG (созданный с помощью Inkscape) и вставить или связать его с другим (большим) файлом. Когда я показываю браузер, я надеюсь увидеть меньший внутри некоторого заполнителя большего.
Является ли это возможным?
Предпочитают , <use>
чтобы , <image>
как позже оказывается при фиксированном разрешении и не масштабируется , как обычные векторные объекты сделать в текущем документе. http://www.w3.org/TR/SVG11/struct.html#ImageElement
Но элемент <use>
не может ссылаться на все файлы SVG, его xlink:href
атрибут является ссылкой на элемент / фрагмент в документе SVG ( http://www.w3.org/TR/SVG11/struct.html#UseElement ). Элемент 'use' может ссылаться на любой локальный или нелокальный ресурс.
пример:
MyLibrary.svg:
<svg (...)>
<rect x="0" y="0" width="200" inkscape:label="upper-left-blue"
style="fill:#729fcf;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="upper-left-blue" height="200"/>
UseParts.svg:
<use x="0" y="0" width="400" xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="MyLibrary.svg#upper-left-blue" xlink:type="simple"
xlink:actuate="onLoad" height="400" id="use8793" xlink:show="embed"/>
Поддержка этой функции может отличаться для разных редакторов / зрителей SVG, насколько я знаю, она должна работать (по крайней мере) в Inkscape, Firefox и Batik.
Используйте
image
элемент и укажите ваш файл SVG. Для развлечения сохраните следующее какrecursion.svg
:Источник: /programming/5451135/embed-svg-in-svg/5451238#5451238
источник