Question

如果你能引导我朝着正确的方向前进，我会感激不尽。

我需要使用 JS 或 CSS 对两个 svg 图像进行分层，就像我在下面的图片（手机和图形）一样，所以它似乎是一个图像。

谢谢

Answer 1

我为你的问题创建了这个plunkr： https://plnkr.co/edit/RPAA1JkRM6Or1pY9yMeI

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

你可以看到我修改你的iphone图像并在里面创建一个div所以在那个div中你可以放任何你想要的东西。也是SVG。

谢谢，乔纳森

result

如何分层2 svg图像

1 个答案: