如何重叠两个SVG图像？ [英] How to overlap two SVG images?

问题描述

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

So I have two SVG images that I've created in Photoshop. The images have all the correct dimensions to align next to one another however, when I export them out they don't overlap. Below are the two images (sorry for the sizes) :

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

And I've exported them out as SVGs then placed the code within my index.html page. That looks like :

<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编码所以它们很大：

Sorry, I had to create a gist as my images are base64 encoded so they're huge :

完整代码

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

Question: The background is transparent in Photoshop. But they overlap one another to the point one hides the other. How can I get my two SVG images to overlap one another but both be visible?

推荐答案

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

The problem with your approach is that both shapes are in seperate svg elements. So they can't overlap with the default svg positioning. You could make them overlay with absolute, relative or fixed positioning but that would be overkill and complicated for such simple shapes. Another approach would be to export both of them in the same file BUT :

对于这样一个简单的形状，你可以使用内联SVG ，其中包含2 多边形元素。简单，更短和人类可读：

For such a simple shape, you can use an inline SVG with 2 polygon elements. Simple, much shorter and "human readable" :

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>

这篇关于如何重叠两个SVG图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！