如何重疊兩個SVG圖像？

Question

所以我有兩個我在Photoshop中創建的SVG圖像。 圖像具有彼此相鄰的所有正確尺寸，但是當我將它們導出時它們不重疊。 以下是兩張圖片（對不起尺碼）：

我已將它們作為SVG導出，然后將代碼放在我的index.html頁面中。 看起來像：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="600" height="862" viewBox="0 0 600 862">
  <image xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAABQIA ..." />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="600" height="862" viewBox="0 0 600 862">
  <image xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8EAAAT7CAMAAACJ ..." />
</svg>

對不起，我不得不創建一個要點，因為我的圖像是base64編碼所以它們很大：

完整代碼

問題：Photoshop中的背景是透明的。 但是它們彼此重疊到一個隱藏另一個的點。 如何讓我的兩個SVG圖像相互重疊但兩個都可見？

Answer 1

你的方法的問題是兩個形狀都是單獨的svg元素 。 所以它們不能與默認的svg定位重疊。 您可以使用絕對，相對或固定定位進行疊加，但對於這種簡單的形狀而言，這將是過度和復雜的。 另一種方法是將它們都導出到同一個文件中但是 ：

對於這種簡單的形狀，您可以使用帶有2個多邊形元素的內聯SVG 。 簡單，短得多，“人類可讀”：

 svg{width:30%; height:auto;} 

 <svg viewbox="0 0 50 60"> <polygon points="0 0 50 0 50 5 0 50" fill="#C000FF"/> <polygon points="0 50 50 5 50 60 0 60" fill="#803698"/> </svg>