如何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圖像

回答

相關問題