合併多個SVG

Question

我想將多個SVG合併爲一個。我目前的解決辦法是這樣的：

<svg> 
    <svg>...</svg> 
    <svg>...</svg> 
    <svg>...</svg> 
</svg> 

這是非常方便的，因爲我可以用視框，大小等爲每個元素分別。但是當我嘗試使用Inkscape編輯該文件時，這些元素似乎以一種奇怪的方式跳躍並改變其大小。

我想過將每個svg轉化爲一個group元素，但我不知道如何，因爲我必須手動應用viewBox，size和position（相對於父級）。

有沒有人有這樣做的建議？

下面是這樣一個文件的例子：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1680" height="966"> 
    <svg contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" id="965194" version="1.1" width="325" preserveAspectRatio="xMidYMid meet" viewBox="426 337 1031 992" height="312" x="666" y="179"> 
     <rect x="426" stroke-linecap="round" y="337" transform="matrix(1.0,0.0,0.0,1.0,0.0,0.0)" fill="none" width="1031" id="52872" height="992" stroke="#000000" stroke-width="10"/> 
    </svg> 
    <svg contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" id="346790" version="1.1" width="150" preserveAspectRatio="xMidYMid meet" viewBox="28 58 445 470" height="159" x="760" y="257"> 
     <ellipse stroke-linecap="round" transform="matrix(1.0,0.0,0.0,1.0,0.0,0.0)" fill="none" rx="212.5" cx="250.5" ry="225.0" id="89340" cy="293.0" stroke="#000000" stroke-width="10"/> 
    </svg> 
    <svg contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" id="342294" version="1.1" width="780" preserveAspectRatio="xMidYMid meet" viewBox="115 363 1665 1461" height="684" x="413" y="2"> 
     <rect x="115" stroke-linecap="round" y="363" transform="matrix(1.0,0.0,0.0,1.0,0.0,0.0)" fill="none" width="1665" id="74016" height="1461" stroke="#000000" stroke-width="10"/> 
    </svg> 
</svg> 

Answer 1

使用多個SVG，最簡單的方法是將其嵌入作爲<圖像0​​和此元件上執行變換。所有瀏覽器都可以更容易地重現準確的圖形並進行編輯。

替代是包裝<SVG>一個<克> roup標記內並執行transform="translate(x,y) rotate(zz)"的<克> roup標籤內。