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