SVG 이미지 마스크 반전

내 응용 프로그램에서는 다른 방법보다 이미지를 사용하여 SVG 모양을 마스크하는 것이 더 편리합니다. (원하는 멀티 컬러 오버레이 효과는 어느 방법으로도 얻을 수 있습니다.) 문제는 마스크로 일반 (회색조) 이미지를 사용하면 결과가 네거티브 필름처럼 보입니다. SVG 속성 또는 영리한 JS/D3 트릭을 사용하여 브라우저에 마스킹 프로토콜을 반전 시키거나, 이미지를 직접 변환 할 수 있습니까? (다른 방법보다 덜 편리함)SVG 이미지 마스크 반전

업데이트 최소 예 :

<!DOCTYPE html> 
 
<title>Image mask</title> 
 

 
<script type="text/javascript" 
 
    src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"> 
 
</script> 
 
<body> 
 
<div> 
 
<button>toggle</button> 
 
</div> 
 
</body> 
 
<script> 
 
var width = 194, 
 
\t height = 240; 
 
\t maskWidth = 30; 
 
var svg = d3.select('body').append('svg') 
 
\t .attr('height', 500); 
 

 
var myMask = svg.insert('mask', ':first-child') 
 
\t .attr('id', 'image_mask'); 
 

 
var marilyn = myMask.append('image') 
 
\t .attr('width', width) 
 
\t .attr('height', height) 
 
\t .attr('xlink:href', "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Marilyn_Monroe_photo_pose_Seven_Year_Itch.jpg/194px-Marilyn_Monroe_photo_pose_Seven_Year_Itch.jpg"); 
 

 
var positive = svg.append('rect') 
 
\t .attr('width',maskWidth) 
 
\t .attr('height', height) 
 
\t .attr('fill', 'red') 
 
\t .attr('mask', 'url(#image_mask)'); 
 

 
var negative = svg.append('rect') 
 
\t .attr('x', maskWidth) 
 
\t .attr('width', width - maskWidth) 
 
\t .attr('height', height) 
 
\t .attr('fill', 'green') 
 
\t .attr('mask', 'url(#image_mask)'); 
 
\t 
 
var toggle = false; 
 
d3.select('button').on('click', function() { 
 
\t toggle = !toggle; 
 
\t positive.transition() 
 
\t \t .attr('height', toggle ? height/2 : height); 
 
}); 
 

 
</script>

출처

2016-06-22 bongbang

당신은 SVG 필터와 함께 좋은 일을 할 수 - 적응 –

에 대한 코드를 게시하시기 바랍니다 @MichaelMullany 좋아, 최소한의 예를 게시했습니다. – bongbang

당신은 당신의 마스크에서 이미지를 반전하는 <filter>를 사용해야합니다.

<svg height="500" xmlns:xlink="http://www.w3.org/1999/xlink" > 
 
    <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="image_mask"> 
 
     <image width="194" height="240" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Marilyn_Monroe_photo_pose_Seven_Year_Itch.jpg/194px-Marilyn_Monroe_photo_pose_Seven_Year_Itch.jpg" 
 
      filter="url(#invert)"/> 
 
    </mask> 
 
    </defs> 
 
    
 
    <rect width="30" height="120" fill="red" mask="url(#image_mask)"/> 
 
    <rect x="30" width="164" height="240" fill="green" mask="url(#image_mask)"/> 
 
</svg>

출처

2016-06-23 06:15:01

SVG 이미지 마스크 반전

답변

관련 문제