feMorphology element | SVGFEMorphologyElement object

Provides a way to thin or thicken artwork.

Scalable Vector Graphics: Filter Effects, Section 15.25.23

Syntax


  <feMorphology operator="actionname" radius="number" />

DOM Information

Inheritance Hierarchy

Node

Element

SVGElement

SVGFEMorphologyElement

Members

The SVGFEMorphologyElement object has these types of members:

Properties

Properties

The SVGFEMorphologyElement object has these properties.

Property	Access type	Description
height		Gets or sets the height of an element.
in1	Read-only	Identifies input for the given filter primitive.
operator	Read-only	Specifies the operation of whether to thin or thicken.
radiusX	Read-only	Specifies the thickening or thinning you want to apply in the X direction.
radiusY	Read-only	Specifies the thickening or thinning you want to apply in the Y direction.
result	Read-only	Provides a reference for the output result of a filter.
width		Defines the width of an element.
x		Gets or sets the x-coordinate value.
y		Gets or sets the y-coordinate value.

Standards information

Scalable Vector Graphics: Filter Effects, Section 15.25.23

Remarks

You can specify thickness or thinness by using the operator property.

You can specify how much you what to thicken or thin by using the radius, radiusX, and radiusY properties.

Examples

This example shows a simple text element and two morphology filters applied to the same text. The first filter thins the text with an operator value of erode and a radius value of 1. The second filter thickens the text with an operator value of dilate and and radius value of 1.2.

The image will look like this.


<!DOCTYPE HTML>
<html>
    
    <head>
    </head>
    
    <body>
        <svg width="400" height="400">

            <defs>
                <filter id="MyFilter1" filterUnits="userSpaceOnUse"
                        x="50" y="50" width="300" height="300">
                    <feMorphology operator="erode"
                        radius="1"  />
                </filter>

                <filter id="MyFilter2" filterUnits="userSpaceOnUse"
                        x="50" y="50" width="300" height="300">
                    <feMorphology operator="dilate" 
                        radius="1.2"  />
                </filter>
            </defs>
            
            <g font-family="Verdana" font-size="36"
                    stroke="black" stroke-width="2">
                <text x="50" y="50">
                    Unfiltered
                </text>

                <text x="50" y="150" filter="url(#MyFilter1)">
                    Erode
                </text>

                <text x="50" y="250" filter="url(#MyFilter2)">
                    Dilate
                </text>
            </g>

        </svg>
    </body>

</html>