SVG feMorphology Element
 Complete SVG Reference
Definition and Usage
The SVG feMorphology element is used to "fattening" or "thinning" a source graphic.
The operator attribute defines whether to erode or dilate the source graphic. The operator attribute can take one of the following values:
- erode (thinning)
- dilate (fattening)
The radius attribute defines the radius for the operation. If two numbers are
specified, the first number is the x-radius and the second number is the
y-radius. If one number is specified, then that value is used for both x and y.
Default is 0
Example 1
The following example shows examples of six types of feMorphology
operations.
Copy the following code into Notepad and save
the file as "femorphology_1.svg". Place the file in your Web directory:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<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>
|
View example
Complete SVG Reference
Want To Be A Web Master?
If you want to be a Web Master, you will have to host your web site with an ISP (Internet Service Provider).
MaximumASP offers seven different configurations of dedicated servers to meet your Windows and .NET hosting needs.
Hosted on our multi-tiered Enterprise Class network, these servers provide the performance, security and reliability
you need to host your high end web sites and applications.
Visit MaximumASP
| 
HOME
Printer friendly page
