html - 如何重叠两个 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>