有趣的 SVG filter - feMorphology

SVG 的濾鏡中，Morphology 算是比較特別的，可以把線條變粗或變細, 套用在字型上可以做出很有意思的效果 ``` $mmcode(r1) ``` <div class="mmresult r1"> <svg width="250" height="250" viewBox="0 0 160 160" style="background-color:#ffa"> <defs> <filter id="a121311_f1"> <feMorphology in="SourceGraphic" operator="erode" radius="0"> <set attributeName="operator" to="erode" begin="a121311_erode.click"/> <set attributeName="operator" to="dilate" begin="a121311_dilate.click"/> <set attributeName="radius" to="0" begin="a121311_r0.click"/> <set attributeName="radius" to="1" begin="a121311_r1.click"/> <set attributeName="radius" to="2" begin="a121311_r2.click"/> <set attributeName="radius" to="3" begin="a121311_r3.click"/> </feMorphology> </filter> </defs> <text id="a121311_erode" x=10 y=20>erode</text> <text id="a121311_dilate" x=90 y=20>dilate</text> <text x=50 y=110>radius</text> <g style="font-size:1.4em"> <text id="a121311_r0" x=10 y=140>0</text> <text id="a121311_r1" x=50 y=140>1</text> <text id="a121311_r2" x=90 y=140>2</text> <text id="a121311_r3" x=130 y=140>3</text> </g> <text x=10 y=80 style="font-size:3.4em" fill="#ff0" stroke="#f00" stroke-width="3" filter="url(#a121311_f1)" > TEST </text> </svg> </div> 如果套用在圖形上結果如下 ``` $mmcode(r2) ``` <div class="mmresult r2"> <svg width="300" height="300" viewBox="0 0 200 200" style="background-color:#ffa"> <defs> <filter id="a121312_f1"> <feMorphology in="SourceGraphic" operator="dilate" radius="0"> <set attributeName="operator" to="erode" begin="a121312_erode.click"/> <set attributeName="operator" to="dilate" begin="a121312_dilate.click"/> <set attributeName="radius" to="0" begin="a121312_r0.click"/> <set attributeName="radius" to="1" begin="a121312_r1.click"/> <set attributeName="radius" to="2" begin="a121312_r2.click"/> <set attributeName="radius" to="3" begin="a121312_r3.click"/> </feMorphology> </filter> </defs> <text id="a121312_erode" x=10 y=20>erode</text> <text id="a121312_dilate" x=90 y=20>dilate</text> <g transform="translate(0,45)"> <text x=50 y=110>radius</text> <g style="font-size:24"> <text id="a121312_r0" x=10 y=140>0</text> <text id="a121312_r1" x=50 y=140>1</text> <text id="a121312_r2" x=90 y=140>2</text> <text id="a121312_r3" x=130 y=140>3</text> </g> </g> <image id="a121312_bird" href="https://yiharng.github.io/bird.jpg" x=155 y=30 width=30 height=30/> <image id="a121312_bomb" href="https://yiharng.github.io/bomb.png" x=155 y=80 width=30 height=30/> <image href="https://yiharng.github.io/bird.jpg" x=10 y=30 height=105 width=138 filter="url(#a121312_f1)"> <set attributeName="href" to="https://yiharng.github.io/bird.jpg" begin="a121312_bird.click"/> <set attributeName="href" to="https://yiharng.github.io/bomb.png" begin="a121312_bomb.click"/> </image> </svg> </div> <font color="#00f" style="font-size:1.3em">*實測結果，chrome 及 firefox 正常, safari 及 iphone 上的結果和其它瀏覽器有點不同, 而且在利用 set 做參數切換時反應有點遲頓</font>

SVG 的濾鏡中，Morphology 算是比較特別的，可以把線條變粗或變細, 套用在字型上可以做出很有意思的效果

<svg width="250" height="250" viewBox="0 0 160 160" style="background-color:#ffa">
<defs>
<filter id="a121311_f1">
  <feMorphology in="SourceGraphic" operator="erode" radius="0">
    <set attributeName="operator" to="erode" begin="a121311_erode.click"></set>
    <set attributeName="operator" to="dilate" begin="a121311_dilate.click"></set>
    <set attributeName="radius" to="0" begin="a121311_r0.click"></set>
    <set attributeName="radius" to="1" begin="a121311_r1.click"></set>
    <set attributeName="radius" to="2" begin="a121311_r2.click"></set>
    <set attributeName="radius" to="3" begin="a121311_r3.click"></set>
  </feMorphology>
</filter>
</defs>
<text id="a121311_erode" x="10" y="20">erode</text>
<text id="a121311_dilate" x="90" y="20">dilate</text>
<text x="50" y="110">radius</text>
<g style="font-size:1.4em">
<text id="a121311_r0" x="10" y="140">0</text>
<text id="a121311_r1" x="50" y="140">1</text>
<text id="a121311_r2" x="90" y="140">2</text>
<text id="a121311_r3" x="130" y="140">3</text>
</g>
<text x="10" y="80" style="font-size:3.4em" fill="#ff0" stroke="#f00" stroke-width="3" filter="url(#a121311_f1)">
TEST
</text>
</svg>  

如果套用在圖形上結果如下

<svg width="300" height="300" viewBox="0 0 200 200" style="background-color:#ffa">
<defs>
<filter id="a121312_f1">
  <feMorphology in="SourceGraphic" operator="dilate" radius="0">
    <set attributeName="operator" to="erode" begin="a121312_erode.click"></set>
    <set attributeName="operator" to="dilate" begin="a121312_dilate.click"></set>
    <set attributeName="radius" to="0" begin="a121312_r0.click"></set>
    <set attributeName="radius" to="1" begin="a121312_r1.click"></set>
    <set attributeName="radius" to="2" begin="a121312_r2.click"></set>
    <set attributeName="radius" to="3" begin="a121312_r3.click"></set>
  </feMorphology>
</filter>
</defs>
<text id="a121312_erode" x="10" y="20">erode</text>
<text id="a121312_dilate" x="90" y="20">dilate</text>
<g transform="translate(0,45)">
<text x="50" y="110">radius</text>
<g style="font-size:24">
<text id="a121312_r0" x="10" y="140">0</text>
<text id="a121312_r1" x="50" y="140">1</text>
<text id="a121312_r2" x="90" y="140">2</text>
<text id="a121312_r3" x="130" y="140">3</text>
</g>
</g>
<image id="a121312_bird" href="https://yiharng.github.io/bird.jpg" x="155" y="30" width="30" height="30"></image>
<image id="a121312_bomb" href="https://yiharng.github.io/bomb.png" x="155" y="80" width="30" height="30"></image>
<image href="https://yiharng.github.io/bird.jpg" x="10" y="30" height="105" width="138" filter="url(#a121312_f1)">
  <set attributeName="href" to="https://yiharng.github.io/bird.jpg" begin="a121312_bird.click"></set>
  <set attributeName="href" to="https://yiharng.github.io/bomb.png" begin="a121312_bomb.click"></set>
</image>
</svg>  

*實測結果，chrome 及 firefox 正常, safari 及 iphone 上的結果和其它瀏覽器有點不同, 而且在利用 set 做參數切換時反應有點遲頓