SVG 的 mask

SVG 的 mask 和 CSS 有一點不同，用的是黑白來代表透明度，白色是不透明，黑色是透明，如以下範例，圖1是 mask 用的圖，圖2是 rect 套用 mask 後，由黃色部份可以看到，中間的那個心是透明的。 clip-path 是直接裁切，mask 似忽可以取代 clip-path，而且還可以加上透明度 ``` $mmcode(r1) ``` <div class="mmresult r1"> <div style="display:inline-block">圖1<br> <svg width="200" height="200" style="background-color:#000"> <defs> <path id="a11201_p1" d="M0,50 a1,1,0,0,1,100,0 a1,1,0,0,1,100,0 C200,110,150,150,100,180 C50,150,0,110,0,50Z"></path> </defs> <use xlink:href="#a11201_p1" fill="#fff"/> <use xlink:href="#a11201_p1" fill="#000" transform="translate(30,30) scale(0.7)"/> <use xlink:href="#a11201_p1" fill="#888" transform="translate(50,50) scale(0.5)"/> </svg> </div> <div style="display:inline-block">圖2<br> <svg width="200" height="200"> <mask id="a11201_m1"> <use xlink:href="#a11201_p1" fill="#fff"/> <use xlink:href="#a11201_p1" fill="#000" transform="translate(30,30) scale(0.7)"/> <use xlink:href="#a11201_p1" fill="#888" transform="translate(50,50) scale(0.5)"/> </mask> <rect x="0" y="0" width="100" height="200" fill="#ff0"/> <rect x="0" y="0" width="200" height="200" mask="url(#a11201_m1)" fill="#00f"/> </svg> </div> </div> ## mask 的有趣範例 直接把圖檔當成 mask ，可以把彩色圖片變成黑白 ``` $mmcode(r2) ``` <div class="mmresult r2"> <svg width="200" height="200" style="background-color:#000"> <mask id="a11202_aa"> <image href="https://yiharng.github.io/bird.jpg" width="200" height="200" preserveAspectRatio="none"/> </mask> <rect x="0" y="0" width="200" height="200" mask="url(#a11202_aa)" fill="#fff"/> </svg> </div> 圖片套用文字當 mask，可以做出不錯的文字特效 ``` $mmcode(r3) ``` <div class="mmresult r3"> <svg width="200" height="100"> <mask id="a11203_bb"> <text x="22" y="62" font-size="60" stroke-width="9" fill="#777" stroke="#777">ASDF</text> <text x="20" y="60" font-size="60" stroke-width="4" fill="#fff" stroke="#fff">ASDF</text> </mask> <image href="https://yiharng.github.io/bird.jpg" width="200" height="100" preserveAspectRatio="none" mask="url(#a11203_bb)"/> </svg> </div>

SVG 的 mask 和 CSS 有一點不同，用的是黑白來代表透明度，白色是不透明，黑色是透明，如以下範例，圖1是 mask 用的圖，圖2是 rect 套用 mask 後，由黃色部份可以看到，中間的那個心是透明的。

clip-path 是直接裁切，mask 似忽可以取代 clip-path，而且還可以加上透明度

<div style="display:inline-block">圖1<br>
<svg width="200" height="200" style="background-color:#000">
<defs>
  <path id="a11201_p1" d="M0,50 a1,1,0,0,1,100,0 a1,1,0,0,1,100,0 C200,110,150,150,100,180 C50,150,0,110,0,50Z"></path>
</defs>
  <use xlink:href="#a11201_p1" fill="#fff"></use>
  <use xlink:href="#a11201_p1" fill="#000" transform="translate(30,30) scale(0.7)"></use>
  <use xlink:href="#a11201_p1" fill="#888" transform="translate(50,50) scale(0.5)"></use>
</svg>
</div>

<div style="display:inline-block">圖2<br>
<svg width="200" height="200">
<mask id="a11201_m1">
  <use xlink:href="#a11201_p1" fill="#fff"></use>
  <use xlink:href="#a11201_p1" fill="#000" transform="translate(30,30) scale(0.7)"></use>
  <use xlink:href="#a11201_p1" fill="#888" transform="translate(50,50) scale(0.5)"></use>
</mask>  
<rect x="0" y="0" width="100" height="200" fill="#ff0"></rect>
<rect x="0" y="0" width="200" height="200" mask="url(#a11201_m1)" fill="#00f"></rect>
</svg>
</div>

圖1

圖2

mask 的有趣範例

直接把圖檔當成 mask ，可以把彩色圖片變成黑白

<svg width="200" height="200" style="background-color:#000">
<mask id="a11202_aa">
  <image href="https://yiharng.github.io/bird.jpg" width="200" height="200" preserveAspectRatio="none"></image>
</mask>
<rect x="0" y="0" width="200" height="200" mask="url(#a11202_aa)" fill="#fff"></rect>
</svg>

圖片套用文字當 mask，可以做出不錯的文字特效

<svg width="200" height="100">
<mask id="a11203_bb">
  <text x="22" y="62" font-size="60" stroke-width="9" fill="#777" stroke="#777">ASDF</text>
  <text x="20" y="60" font-size="60" stroke-width="4" fill="#fff" stroke="#fff">ASDF</text>
</mask>
  <image href="https://yiharng.github.io/bird.jpg" width="200" height="100" preserveAspectRatio="none" mask="url(#a11203_bb)"></image>
</svg>