开源教程在线编辑器

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <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>

</body>
</html>