⇪

feMorphology

facebook-svg gplus-svg twitter-svg

El filtro <feMorphology> afecta ( modifica ) la forma ( o sea la morfología ) de un objeto. El atributo operator de <feMorphology> puede tomar uno de estos dos valores:

  • - erode que disminuye y
  • - dilate que amplia.

El atributo radius especifica el tamaño de la deformación.

Veamos un ejemplo básico:


  <svg viewBox="-250 0 500 180" width="500" height="180">
      <filter id="erosionar">
        <feMorphology operator="erode" radius="1"/>
      </filter>
      <filter id="dilatar">
        <feMorphology operator="dilate" radius="2"/>
      </filter>
      <g text-anchor="middle">
      <text y="1em">Texto normal</text>
      <text y="2em" filter="url(#erosionar)">texto reducido</text>
      <text y="3em" filter="url(#dilatar)">texto ampliado</text>
      </g>
  </svg>

No hay mucho que comentar aquí. Si quiere puede jugar con este ejemplo en Codepen

See the Pen feMorphology #1 by Gabi (@enxaneta) on CodePen.

Un caso práctico:
Texto subrayado con espacios alrededor de los descendentes.

En tipografía el descendente ( no descendiente ) de una letra en minúsculas es aquella parte que va por debajo de la llamada línea base, como por ejemplo el rabo de la p de la j o de la q. Por razones estéticas y claridad es interesante poder subrayar texto dejando espacios alrededor de los descendentes. En SVG podemos utilizar un filtro para conseguir este efecto:

     
<svg width="600" height="100">
      <filter id="subrayado" primitiveUnits="objectBoundingBox">
        <feMorphology in="SourceGraphic" operator="dilate" radius="0.015" result="contorno"></feMorphology>
        <feFlood flood-color="blue" width="1" height="0.01" x="0" y="0.90" result="linea"></feFlood>
        <feComposite in="linea" in2="contorno" operator="out" result="subrayado"></feComposite> 
        <feMerge>
          <feMergeNode in="subrayado"></feMergeNode>
          <feMergeNode in="SourceGraphic"></feMergeNode>
        </feMerge>
      </filter>
      <text filter="url(#subrayado)" x="300" y="60" text-anchor="middle" >Un pastel de higos y almendras</text>
</svg>

See the Pen SVF texto subrayado* by Gabi (@enxaneta) on CodePen.

La explicación del código

Utilizamos filterUnits="objectBoundingBox", por lo cual las dimensiones del filtro se dan en porcentajes respecto al tamaño de la caja lindante ( the bounding box ).

<filter id="subrayado" primitiveUnits="objectBoundingBox">

El filtro primitivo feMorphology amplia las letras del texto, el tamaño de la deformación siendo radius="0.015".

<feMorphology in="SourceGraphic" operator="dilate" radius="0.015" result="contorno"></feMorphology>

El filtro primitivo <feFlood> crea una línea azul, de hecho un rectángulo con una altura muy pequeña ( height="0.01" ) y una anchura que mide lo mismo que el texto ( width = 1 )

<feFlood flood-color="blue" width="1" height="0.01"  x="0" y="0.90" result="linea"></feFlood>

El filtro primitivo <feComposite> combina el texto con la línea. El operator utilizado es "out", lo que quiere decir que el texto dilatado recorta la línea azul, justo al revés de como lo haría clipPath.

<feComposite in="linea" in2="contorno" operator="out" result="subrayado"> </feComposite>

Finalmente utilizamos <feMerge>; para combinar el subrayado con el texto o sea el grafico de origen al cual le aplicamos el filtro:

<filter id="subrayado" primitiveUnits="objectBoundingBox" >
. . . . . . . . . .
   <feMerge>
       <feMergeNode in="subrayado"></feMergeNode>
       <feMergeNode in="SourceGraphic"></feMergeNode>
   </feMerge>
</filter>
<text filter="url(#subrayado)" x="300" y="60" text-anchor="middle" >
Un pastel de higos y almendras</text>

Si quiere puede jugar con este ejemplo en Codepen