如何重叠两个SVG图像？

所以我有两个我在Photoshop中创建的SVG图像.图像具有彼此相邻的所有正确尺寸,但是当我将它们导出时它们不重叠.以下是两张图片(对不起尺码):

我已将它们作为SVG导出,然后将代码放在我的index.html页面中.看起来像:

对不起,我必须创建一个要点,因为我的图像是base64编码所以它们很大:

完整代码

问题:Photoshop中的背景是透明的.但是它们彼此重叠到一个隐藏另一个的点.如何让我的两个SVG图像相互重叠但两个都可见？

你的方法的问题是两个形状都是单独的svg元素.所以它们不能与默认的svg定位重叠.您可以使用绝对,相对或固定定位进行叠加,但对于这种简单的形状而言,这将是过度和复杂的.另一种方法是将它们都导出到同一个文件中但是:

对于这种简单的形状,您可以使用带有2个多边形元素的内联SVG.简单,短得多,"人类可读":

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