SVG를 사용하여 DIV 클립 (또는 마스크) 사용

Question

저는 많은 사람들을 봤습니다. 이제 막 포기했습니다. 그래서 전문가가 저를 도와 줄 수 있는지 알아 보겠습니다.

일러스트 레이터를 통해 .SVG로 변환 된 로고가 있습니다.

내 목표는 전체 div를 클립 (또는 원하는 경우 마스크)하기 위해 그 로고를 사용하여 일부만 보이고 배경을 볼 수있게하는 것입니다.

이 웹 사이트를 전체 확장 가능한 환경으로 만들기 위해 .SVG 방식을 사용하기로 결정했기 때문에 .png는 풀 HD 해상도에서 1024x768로 정확하게 작동하지 않습니다.

먼저 div를 클립하는 방법과 동시에 div의 해당 부분을 보여주는 대신 모든 것을 보여줄 수 있도록 "역방향 클립"하는 방법을 알고 싶습니다. 정말 필요할 때

나는 열심히

가 사전에 감사합니다 ... 당신의 답변을 기다리고됩니다.

Answer 1

내가 너를 올바르게 이해했다면 (그리고 그것에 대해 잘 모르겠다) '배경에 로고의 모양에 맞는 모든 것을 보여주고 싶다', 맞습니까? 그래도 로고를 반전시키고 투명하게 만들고 배경을 검정이나 흰색 또는 무언가와 같은 중립적 인 색상으로 지정하면 어떨까요? 그런 다음 두 개의 div를 서로 위에 놓을 수 있으며 맨이 로고입니다. http://jsfiddle.net/ds82/R4rBH/2/

데르 원 로고이며 내부와 블루 라인 밖에서 투명한 그리고 그것은 SVG의 :

은 내가 무슨 뜻인지를 보여주기 위해 바이올린을 만들었습니다. 희망은 그것이 당신이 원하는 것입니다.

Answer 2

나는 그렇게 할 수 없을 것이라고 생각합니다. 한 번 플러그인과 발전기를 보았습니다 like this, 아마 그게 최선의 방법은 아니라고 생각합니다.

당신이 svg에서 클립하기를 원하는 텍스트를 넣을 수 있습니다. html이 svg와 제대로 상호 작용할 수있는 방법을 찾는 것보다 쉽습니다.

Answer 3

.svg를 통해 할 수 없기 때문에 모든 것이 검은 색이고 내 로고가 투명한 .png를 사용하게되었습니다. 그래도 대답을 찾을 수 없었던 슬픈 일 ...

Answer 4

기본적으로 원하는 것은 단지 in Firefox입니다. 방법은 SVG에서 올바른 <mask> 요소를 정의하고 CSS를 통해 그것을 적용하는 것입니다 : 당신이 SVG :

#content { 
    mask: url(#logo-mask); 
}