2 개의 svg 이미지를 레이어하는 방법

올바른 방향으로 안내 할 수 있다면 정말 감사하겠습니다.2 개의 svg 이미지를 레이어하는 방법

가 I i가 이하 (전화 및 그래픽)가되므로 하나 개의 이미지로 될 표시 이미지 예와 같이 JS 또는 CSS을 사용하여 두 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에서 마스크로'이미지'를 사용할 수 없으므로 사람들에게 해결책을 코딩하지 말고 물어 보지만 그 해결 방법을 찾도록 도와주세요. – denysdovhan

: 당신은 내가 당신의 아이폰 이미지를 수정하고를 만들어 볼 수 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에 div 네가 원하는대로하면 돼. 또한 SVG.

감사합니다, 조나단

result

출처

2016-09-14 14:09:34

그래,하지만 나는 약 1000 장의 이미지를 많이 가지고 있다고 말해야 해. – denysdovhan

그게 문제가되지 않습니다. 당신은 이것을 복제 할 수 있습니다. 또한 1000 개의 스크립트가 있어야합니다. –

2 개의 svg 이미지를 레이어하는 방법

답변

관련 문제