是否可以將一個 inkscape SVG 文件嵌入或連結到另一個文件中?

是否可以將一個 inkscape SVG 文件嵌入或連結到另一個文件中?

我想取得一個小的 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

相關內容