如何重叠两个 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 编码的，所以它们很大：

full code

问题：背景在 Photoshop 中是透明的。但它们相互重叠，以至于一个隐藏另一个。如何让我的两个 SVG 图像相互重叠但都可见？

Answer 1

您的方法的问题在于这两个形状都在单独的 svg 元素中。所以它们不能与默认的 svg 定位重叠。你可以用绝对、相对或固定的定位来让它们叠加，但对于这种简单的形状来说，这将是过度的和复杂的。另一种方法是将它们都导出到同一个文件中 BUT ：

对于这样一个简单的形状，您可以使用 inline SVG 和 2 polygon elements。简单，更短且“人类可读”：

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>