サーチ…
前書き
mask
要素を使用すると、ソフトエッジで「クリップ」することができます。テキストを含む複数の要素からマスクを作成することができます。白いマスクのすべてが完全に不透明になります。黒のすべてが完全に透明になります。白と黒の間の値は半透明になります。
備考
マスクは計算コストの高い操作であることに注意してください。計算は、マスクの領域内のすべてのピクセルに対して行う必要があります。マスクの面積はできるだけ小さくしてください。
基本マスク
中央に丸い穴があり、画像の背景が不鮮明な緑色の四角形です。
<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>
テキストと図形による複雑な例
背景にイメージが表示されている複雑なマスクが適用された緑の四角形。
<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>
半透明
4つのグレースケール値を使用して4つの穴が作成され、4つの異なる不透明度をもたらす緑の矩形(もう一度...)。
<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>
グラデーション付きマスク
中央に穴が開いた緑色の矩形で、柔らかいエッジがあります。
<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>
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow