feMorphology

< svg‎ | elements
Jump to: navigation, search

feMorphology

Needs Summary: This article does not have a summary. Summaries give a brief overview of the topic and are automatically included on some listing pages that link to this article.


Overview Table

DOM Interface SVGElement

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>

Notes

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.

Syntax

Standards information

Members

The SVGFEMorphologyElement object has these properties:

  • height: Gets or sets the height of an element.
  • in1: Identifies input for the given filter primitive.
  • operator: Specifies the operation of whether to thin or thicken.
  • radiusX: Specifies the thickening or thinning you want to apply in the X direction.
  • radiusY: Specifies the thickening or thinning you want to apply in the Y direction.
  • result: 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.

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?

See also

Related articles

Filters































  • feMorphology












Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]