Sök…
Introduktion
Den mask Elementet tillåter dig att "klipp" med mjuka kanter. Du kan komponera masker från multibla element inklusive text. Allt av en mask som är vit kommer att vara helt ogenomskinlig. Allt som är svart kommer att vara helt transparent. Värdena mellan vit och svart kommer att vara halvgenomskinliga.
Anmärkningar
Var medveten om att masker är en beräkningskrävande operation. Beräkningen måste göras för varje pixel i masken. Så håll området på din mask så liten som möjligt.
grundmask
En grön rekt med ett runt hål i mitten som visar bildbakgrunden under.
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<mask id="myMask">
<rect x="0" y="0" width="100" height="100" fill="white"/>
<circle cx="50" cy="50" r="45" fill="black"/>
</mask>
<image xlink:href="https://cdn.pixabay.com/photo/2013/04/06/05/06/ship-100978_960_720.jpg" width="100" height="100"/>
<rect x="0" y="0" width="100" height="100" fill="green" mask="url(#myMask)"/>
</svg>
komplexa exempel med text och former
En grön rekt med en komplex mask applicerad på den som visar bakgrundsbilden.
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<mask id="myMask0">
<circle cx="50" cy="50" r="30" fill="white"/>
</mask>
<mask id="myMask">
<rect x="0" y="0" width="100" height="100" fill="white"/>
<text x="5" y="60" font-size="40">Mask</text>
<circle cx="50" cy="50" r="30" fill="black"/>
<text x="5" y="60" font-size="40" mask="url(#myMask0)" fill="white">Mask</text>
</mask>
<image xlink:href="https://cdn.pixabay.com/photo/2013/04/06/05/06/ship-100978_960_720.jpg" width="100" height="100"/>
<rect x="0" y="0" width="100" height="100" fill="green" mask="url(#myMask)"/>
</svg>
halv transparens
en grön rekt (igen ...) med fyra hål skapade med 4 gråskala värden vilket resulterar i 4 olika opaciteter.
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<mask id="myMask">
<rect x="0" y="0" width="100" height="100" fill="white"/>
<circle cx="25" cy="25" r="20" fill="black"/>
<circle cx="75" cy="25" r="20" fill="#333"/>
<circle cx="25" cy="75" r="20" fill="#666"/>
<circle cx="75" cy="75" r="20" fill="#999"/>
</mask>
<image xlink:href="https://cdn.pixabay.com/photo/2013/04/06/05/06/ship-100978_960_720.jpg" width="100" height="100"/>
<rect x="0" y="0" width="100" height="100" fill="green" mask="url(#myMask)"/>
</svg>
en mask med en lutning
En grön rekt med ett hål i mitten, med mjuka kanter.
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<radialGradient id="rg">
<stop offset="0" stop-color="black"/>
<stop offset="1" stop-color="white"/>
</radialGradient>
<mask id="myMask">
<rect x="0" y="0" width="100" height="100" fill="white"/>
<circle cx="50" cy="50" r="45" fill="url(#rg)"/>
</mask>
<image xlink:href="https://cdn.pixabay.com/photo/2013/04/06/05/06/ship-100978_960_720.jpg" width="100" height="100"/>
<rect x="0" y="0" width="100" height="100" fill="green" mask="url(#myMask)"/>
</svg>