我想获取一个小的 SVG 文件(使用 Inkscape 创建),并将其嵌入或链接到另一个(较大的)文件中。当通过浏览器显示时,我希望看到较小的文件显示在较大文件的某个占位符内。
是否可以?
答案1
<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 中运行。
答案2
使用image
元素并引用您的 SVG 文件。为了好玩,将以下内容保存为recursion.svg
:
<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="-50" cy="-50" r="30" style="fill:red" />
<image x="10" y="20" width="80" height="80" xlink:href="recursion.svg" />
</svg>
来源:https://stackoverflow.com/questions/5451135/embed-svg-in-svg/5451238#5451238