Export (0) Print
Expand All

feMorphology element | SVGFEMorphologyElement object

Provides a way to thin or thicken artwork.

Scalable Vector Graphics: Filter Effects, Section 15.25.23Internet Explorer 10

 

Syntax


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

DOM Information

Inheritance Hierarchy

 Node
  Element
   SVGElement
     SVGFEMorphologyElement

Members

The SVGFEMorphologyElement object has these types of members:

Properties

The SVGFEMorphologyElement object has these properties.

PropertyAccess typeDescription

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

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.

feMorphology element

<!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>

 

 

Show:
© 2015 Microsoft