如何重叠两个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编码的，所以它们非常大，我不得不创建一个gist：

完整代码

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

- pourmesomecode

---

你的SVG只是作为一些PNG的包装器？如果你将图像绘制为矢量图，你就可以使用CSS控制描边和填充。否则，最好还是直接使用PNG。 - flemcito

这将在codepen.io中保存得很好。 - AntiHeadshot

@flemcito 基本上没错。我尝试过使用PNG格式，但它们无法在一起对齐。也就是说，一个图像作为底部三角形，其他图像作为顶部三角形。所以我认为SVG可能是可行的方法。 - pourmesomecode

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>

- web-tiki

---

你甚至可以使用一个矩形来表示较浅的颜色，这样形状会更简单。 - AntiHeadshot

是的，@AntiHeadshot甚至可以没有任何元素，并在svg元素上使用background CSS属性，但我认为为了问题的完整性，这种方法更加“易懂”。 - web-tiki

我有一张完整的图片。您选择一个按钮，然后我会得到两个三角形图像，如上所示。然后您再点击另一个按钮，它将删除底部的三角形并替换为两个较小的三角形。所有这些图像都将导出为三角形。我对SVG不熟悉，所以我认为获得并排放置两个三角形图像的唯一方法是通过SVG。 - pourmesomecode

@MeMyselfAndI，我很难理解您确切的需求。使用SVG，您可以使用任何形状来裁剪图像，也许这正是您要寻找的？ - web-tiki

@MeMyselfAndI 好的，如果你想填充SVG元素（多边形、路径...），你可以使用图案元素。这种方法在这里有解释：https://dev59.com/3W865IYBdhLWcg3wd-ce - web-tiki