如何2层svg图像

如果你能指导我正确的方向，我会apreciate。如何2层svg图像

我需要使用JS或CSS像例如图像I具有低于（电话和一个图形），所以它似乎是作为一个图像叠加两种SVG图像。

谢谢

2016-09-14 denysdovhan

预计你至少尝试为自己的代码这一点。堆栈溢出不是代码写入服务。我建议你做一些[**额外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），无论是通过谷歌或通过搜索，尝试和。如果您仍然遇到麻烦，请返回**您的代码**并解释您尝试过的以及为什么它不起作用。 –

是的，我知道，我已经在寻找可能的解决方案。据我所知，我们不能使用'image'作为svg中的掩码，所以我要求人们不要编写解决方案，而是帮助我找到解决方法。 – denysdovhan

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

.container-iphone { 
 
    width: 657px; 
 
    height: 588px; 
 
} 
 
.container-iphone img { 
 
\t position: absolute; 
 
\t z-index: 2; 
 
} 
 
.container-iphone .inside { 
 
    padding-top: 50px; 
 
\t 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> 
 
\t <div class="container-iphone"> 
 
\t \t <img src="http://i.imgur.com/WXt6Pyu.png" /> 
 
\t \t <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> 
 
\t </div> 
 
</body> 
 
</html>

，你可以看到我修改你的iphone形象，创造div里面所以在那个div你可以pu无论你想要什么。也是SVG。

感谢，乔纳森

result

来源

2016-09-14 14:09:34

是的，但我不得不说我有很多这样的图像，大约有1000张照片。 – denysdovhan

这不是一个问题。你可以复制这个。还有一个脚本有1000个。 –

如何2层svg图像

回答

相关问题