<feMorphology>

åºçº¿ å¹¿æ³å¯ç¨

<feMorphology> SVG æ»¤éåè¯ç¨äºå¯¹è¾å¥å¾åè¿è¡èèæè¨èãå®çç¨éå°¤å¶ä½ç°å¨å ç²æåç»ææä¸ã

ä½¿ç¨ä¸ä¸æ

ç±»å«	æ»¤éåç´
åè®¸çåå®¹	ä»»ææ°éãä»»æé¡ºåºçä¸ååç´ ï¼ `<animate>`ã`<set>`

å±æ§

DOM æ¥å£

æ¤åç´ å®ç°äº SVGFEMorphologyElement æ¥å£ã

ç¤ºä¾

è¿æ»¤ SVG åå®¹

SVG

html

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="180">
  <filter id="erode">
    <feMorphology operator="erode" radius="1" />
  </filter>
  <filter id="dilate">
    <feMorphology operator="dilate" radius="2" />
  </filter>
  <text y="1em">æ®éææ¬</text>
  <text id="thin" y="2em">ç»ææ¬</text>
  <text id="thick" y="3em">ç²ææ¬</text>
</svg>

CSS

css

text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3em;
}

#thin {
  filter: url(#erode);
}

#thick {
  filter: url(#dilate);
}

è¿æ»¤ HTML åå®¹

SVG

html

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <filter id="erode">
    <feMorphology operator="erode" radius="1" />
  </filter>
  <filter id="dilate">
    <feMorphology operator="dilate" radius="2" />
  </filter>
</svg>

<p>æ®éææ¬</p>
<p id="thin">ç»ææ¬</p>
<p id="thick">ç²ææ¬</p>

CSS

css

p {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3em;
}

#thin {
  filter: url(#erode);
}

#thick {
  filter: url(#dilate);
}