有趣的 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>