• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

10. Filters > The feMorphology Element

The feMorphology Element

The <feMorphology> element lets you “thin” or “thicken” a graphic. You specify an operator with a value of erode to thin or dilate to thicken a graphic. The radius attribute tells us how much the lines are to be thickened or thinned. It’s ordinarily applied to alpha channels; in Example 10-12 we erode and dilate a simple line drawing. As you see in Figure 10-23, erosion can wreak havoc on a drawing that has thin lines to begin with.

Example 10-12. Thickening and thinning with feMorphology
<defs>
<g id="cat" stroke-width="2">
    <!-- drawing of a cat -->
</g>

<filter id="erode1">
    <feMorphology operator="erode" radius="1"/>
</filter>

<filter id="dilate2">
    <feMorphology operator="dilate" radius="2"/>
</filter>
</defs>

<use xlink:href="/getfile?safari4=true&item=/images/0596002238/assets/#cat"/>
<text x="75" y="170" style="text-anchor: middle;">Normal</text>

<use xlink:href="/getfile?safari4=true&item=/images/0596002238/assets/#cat" transform="translate(150,0)"
    style="filter: url(#erode1);"/>
<text x="225" y="170" style="text-anchor: middle;">Erode 1</text>

<use xlink:href="/getfile?safari4=true&item=/images/0596002238/assets/#cat" transform="translate(300,0)"
    style="filter: url(#dilate2);"/>
<text x="375"....

PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint