Invertieren der SVG-Bildmaske

In meiner Anwendung ist es für mich bequemer, ein Bild zu verwenden, um SVG-Formen zu maskieren als umgekehrt. (Die gewünschten mehrfarbigen Überlagerungseffekte können in beide Richtungen erzielt werden.) Das Problem ist, wenn ich ein normales (Graustufen-) Bild als Maske verwende, sieht das Ergebnis wie ein Negativfilm aus. Gibt es ein SVG-Attribut oder einen cleveren JS/D3-Trick, mit dem ich dem Browser sagen kann, dass er sein Maskierungsprotokoll invertiert, oder bin ich dabei, die Bilder selbst zu konvertieren (was am Ende weniger praktisch ist als umgekehrt)?Invertieren der SVG-Bildmaske

aktualisieren Minimal Beispiel:

<!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>

Quelle

2016-06-22 bongbang

Sie können große Dinge mit SVG-Filter tun - bitte schreiben Sie den Code für die Anpassung –

@MichaelMullany Okay, ich habe ein minimales Beispiel geschrieben. – bongbang

Sie erhalten eine <filter> zu invertieren das Bild in der Maske verwenden müssen.

<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>

Quelle

2016-06-23 06:15:01

Antwort

Verwandte Themen