2つのsvgイメージをレイヤーする方法

正しい方向に私を導くことができたら、私は感謝します。2つのsvgイメージをレイヤーする方法

は、私は私が下記（電話およびグラフィック）を持っているので、一つの画像のように見える例の画像のようにJSまたはCSSを使用して、2枚のSVG画像をレイヤーする必要があります。

はありがとう

私はあなたの質問のために、このplunkrを作成

2016-09-14 denysdovhan

は、あなたが、少なくとも自分のためにこれをコーディングすることを試みることが期待されます。スタックオーバーフローはコードを書くサービスではありません。私はいくつか[**追加の研究**]を行うことをお勧めします（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users） Googleを介して、またはSOを検索して、試みてください。それでも問題が解決しない場合は、**あなたのコード**に戻って、あなたが試したこととそれがうまくいかなかった理由を説明してください。 –

はい、私はそれを知っており、私はすでに解決策を探してきました。私が知っているように、私たちはsvgのマスクとして 'image'を使うことはできないので、解決策をコード化しないように人々に頼んでいますが、それを解決する方法を見つけるのを助けます。 – denysdovhan

：あなたは私はあなたのiPhoneの画像を変更して作成する見ることができるよう 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>

div内でdivを使うことができますあなたが欲しいものは何でも。またSVG。

おかげで、ジョナサン

result

出典

2016-09-14 14:09:34

ええ、しかし、私はそのような画像、約1000枚の写真がたくさんあると言わなければなりません。 – denysdovhan

それは問題ではありません。あなたはこれを複製することができます。また、1000を持つスクリプトで。 –

2つのsvgイメージをレイヤーする方法

答えて

関連する問題