Source Code:
Result:
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="Erode1"> <feMorphology operator="erode" in="SourceGraphic" radius="1" /> </filter> <filter id="Erode3"> <feMorphology operator="erode" in="SourceGraphic" radius="3" /> </filter> <filter id="Erode4"> <feMorphology operator="erode" in="SourceGraphic" radius="4" /> </filter> <filter id="Dilate1"> <feMorphology operator="dilate" in="SourceGraphic" radius="1" /> </filter> <filter id="Dilate3"> <feMorphology operator="dilate" in="SourceGraphic" radius="3" /> </filter> <filter id="Dilate4"> <feMorphology operator="dilate" in="SourceGraphic" radius="4" /> </filter> </defs> <g enable-background="new"> <g font-family="Verdana" font-size="50" stroke="red" stroke-width="4"> <text x="50" y="60">Unfiltered</text> <text x="50" y="120" filter="url(#Erode1)">Erode 1</text> <text x="50" y="180" filter="url(#Erode3)">Erode 3</text> <text x="50" y="240" filter="url(#Erode4)">Erode 4</text> <text x="50" y="300" filter="url(#Dilate1)">Dilate 1</text> <text x="50" y="360" filter="url(#Dilate3)">Dilate 3</text> <text x="50" y="420" filter="url(#Dilate4)">Dilate 4</text> </g> </g> </svg> </body> </html>
Edit the code above and click "Submit Code" to see the result.
W3Schools.com
- Try it yourself