如何对 2 层 svg 图像进行分层
Posted
技术标签:
【中文标题】如何对 2 层 svg 图像进行分层【英文标题】：How to layer 2 svg images 【发布时间】：2016-09-14 13:28:30 【问题描述】：如果您能指导我正确的方向，我将不胜感激。
我需要使用 JS 或 CSS 将两个 svg 图像分层，就像我下面的示例图像（电话和图形）一样似乎是一张图片。
谢谢
【问题讨论】：
希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。 是的，我知道，并且我已经搜索了可能的解决方案。据我所知，我们不能在 svg 中使用image 作为掩码，所以我要求人们不要编写解决方案，但请帮助我找到解决方案的任何想法。
【参考方案1】：
我为您的问题创建了这个 plunkr： https://plnkr.co/edit/RPAA1JkRM6Or1pY9yMeI
.container-iphone
width: 657px;
height: 588px;
.container-iphone img
position: absolute;
z-index: 2;
.container-iphone .inside
padding-top: 50px;
text-align: center;
transform: translate(50%,50%);
position: relative;
width: 339px;
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Iphone Mask - Jonathan Muszkat</title>
<meta name="description" content="Iphone Mask">
<meta name="author" content="Jonathan Muszkat">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-iphone">
<img src="http://i.imgur.com/WXt6Pyu.png" />
<div class="inside">whatever whatever whatever whatever whatever whatever whatever whatever whatever<br/> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever <div>
</div>
</body>
</html>如您所见，我修改了您的 iphone 图像并在其中创建了一个 div，因此您可以在该 div 中放置您想要的任何内容。还有 SVG。
谢谢， 乔纳森
result
【讨论】：
是的，但我不得不说我有很多这样的图片，大约 1000 张照片。 没问题。你可以复制这个。也有一个脚本有 1000。以上是关于如何对 2 层 svg 图像进行分层的主要内容，如果未能解决你的问题，请参考以下文章