SVG에서 배경의 역함수를 사용하여 도형을 채우는 방법은 무엇입니까?

Question

모양 만들기 방법. 그 뒤에있는 모든 색상을 반전 (xor?)하는 직사각형?

는 실패 나는 시도 :

<filter 
id="invert"> 
<feColorMatrix 
in="BackgroundImage" 
values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0 "/> 
<feComposite 
operator="in" 
in2="SourceGraphic"/> 
</filter> 
<svg> 
    <rect x="10" y="10" width="50" height="50" fill="blue"></rect> 
    <rect x="20" y="20" width="50" height="50" fill="blue" style="filter: url(#invert);"></rect> 
</svg> 

http://codepen.io/anon/pen/bqXPPZ

Answer 1

backgroundImage의 거의 모든 브라우저에서 지원되지 않는 입력 공식적으로 다음 필터 사양에서 더 이상 사용되지 않습니다.

당신의 대안은 다음과 같습니다

• 배경 이미지에 무엇이든의 사본을 가지고 당신이 그것을 비표준 CSS 배경 필터를
• 사용을 사용할 수 있도록 feImage를 사용하여 필터로 가져옵니다 : 반전 (100 %) - 만 최근 웹킷에 (일명하지 크롬)을 지원
• 사용 CSS 배경 - 혼합 및 혼합 - 혼합 예 (만 최근의 브라우저) :

.content { 
 
    background-image: url("http://stylecampaign.com/blog/blogimages/SVG/fox-1.svg"); 
 
    background-size: 600px; 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 30px; 
 
    width: 700px; 
 
    height: 800px; 
 
} 
 

 
.inverter { 
 
    background: white; 
 
    position: absolute; 
 
    top: 200px; 
 
    left: 300px; 
 
    width: 300px; 
 
    height: 100px; 
 
    mix-blend-mode: exclusion; 
 
}

<div class="content"> 
 
    <div class="inverter"/> 
 
</div>

,

• 귀하의 마지막 옵션은 반전 SVG 필터를 사용하여 내용의 반전 아래의 원본 콘텐츠 레이어 다음 원하는 모양으로자를 반전 된 버전에 마스크를 사용하는 것입니다.

<svg width="800px" height="600px"> 
 
    <defs> 
 
    <filter id="invert"> 
 
     <feComponentTransfer> 
 
     <feFuncR type="table" tableValues="1 0"/> 
 
     <feFuncG type="table" tableValues="1 0"/> 
 
     <feFuncB type="table" tableValues="1 0"/> 
 
     </feComponentTransfer> 
 
    </filter> 
 
    
 
    <mask id="mask-me"> 
 
     <circle cx="215" cy="180" r="100" fill="white" /> 
 
    </mask> 
 
    </defs> 
 
    
 
    <image width="400" height="400" x="20" y="20" xlink:href="http://stylecampaign.com/blog/blogimages/SVG/fox-1.svg" /> 
 
    <image width="400" height="400" x="20" y="20" filter="url(#invert)" xlink:href="http://stylecampaign.com/blog/blogimages/SVG/fox-1.svg" mask="url(#mask-me)"/> 
 

 
</svg>