如何重叠两个 SVG 图像？

Posted 2023-03-05

【中文标题】如何重叠两个 SVG 图像？

【英文标题】：How to overlap two SVG images?

【发布时间】：2016-03-27 14:37:19

【问题描述】：

所以我有两个我在 Photoshop 中创建的 SVG 图像。这些图像具有所有正确的尺寸，可以彼此对齐，但是，当我将它们导出时，它们不会重叠。下面是两张图片（对不起尺寸）：

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

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid"   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"   viewBox="0 0 600 862">
  <image xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8EAAAT7CAMAAACJ ..." />
</svg>

抱歉，我必须创建一个要点，因为我的图像是 base64 编码的，所以它们很大：

full code

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

【问题讨论】：

您的 svg 只是作为几个 PNG 的包装器？如果您将图像绘制为矢量，您将能够控制描边并使用 CSS 填充。否则你会更好地使用 pngs...

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

@flemcito 基本上是的。我试过PNG，但它们并没有彼此对齐。例如，一个图像作为底部三角形，然后其他图像作为顶部三角形。所以我认为 SVG 可能是要走的路

【参考方案1】：

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

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

svgwidth: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>

【讨论】：

你甚至可以用一个矩形来做较亮的，这样形状就更简单了。

是的@AntiHeadshot 甚至根本没有元素，并在svg 元素上使用background CSS 属性，但我认为为了这个问题，这种方法更“可以理解”

我有很多不同的图像。基于onClick，我将它们关闭和打开。背景紫色只是为了简单起见，因为我还没有找到我正在使用的最佳图像

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

@MeMyselfAndI 好的，如果您想填充 SVG 元素（多边形、路径...），您可以使用图案元素。这种方法解释here