Efectos de texto con SVG: patrones, máscaras y trazados de recorte

Ya sabe que el formato SVG puede hacer mucho más que mostrar formas basadas en vectores. Hoy quiero mostrarles cómo se pueden crear efectos de texto con SVG. Los patrones, las máscaras y los trazados de recorte le permiten implementar una gran cantidad de ideas creativas. Puede realizar efectos de texto inusuales y únicos que ni siquiera se pueden hacer con la ayuda de las muchas características de CSS3 o que al menos no funcionan en todos los navegadores populares.

Patrones como fondo de texto

El elemento „“ le permite crear cualquier patrón que desee a través de SVG y configurarlo como fondo para formas y también para textos. Esto puede ser líneas repetitivas, círculos o cuadrados. Definir dos cuadrados con la longitud de un píxel cada uno es suficiente para crear un patrón de tablero de ajedrez de dos por dos píxeles. Incluso una simple línea puede convertirse en un patrón interesante para los textos.

<defs>
  <pattern id="muster" x="0" y="0" width="5" height="5" patternUnits="userSpaceOnUse">
    <line x1="0" y1="0" x2="5" y2="5" stroke="#a62121" />
  </pattern>
</defs>

Los elementos „“, así como otros elementos que no se muestran directamente, pero a los que se hace referencia, deben colocarse dentro del contenedor „“. Se debe asignar una ID al patrón para que llene un elemento. Posteriormente, esta ID se asigna al patrón a través del atributo «relleno» o característica CSS. Esto no solo funciona con formas clásicas, sino también con el elemento de fuente „“.

text {
  fill: url(#muster);
}

En el ejemplo, un patrón se marca con el ID „patrón“ a través de „“ y luego se asigna a un elemento „“. A diferencia de las soluciones puramente gráficas, el texto aún se puede seleccionar y, por lo tanto, también se puede copiar. CSS3 tiene una opción similar con su atributo „clip de fondo“. El valor «texto» asegura que un gráfico de fondo que se asignó a un elemento solo se utilizará en el texto de este elemento. Esto crea el mismo efecto que en el ejemplo de SVG. Sin embargo, Chrome es el único navegador que admite el valor «texto» para este atributo.

Cortar texto

Usar el elemento „“ le permite lograr el efecto opuesto del primer ejemplo. En lugar de agregar un patrón a un texto, puede recortar el texto de un patrón. Para hacerlo, debe establecer un patrón, así como una máscara a través del elemento „“ en el área “. Las máscaras funcionan de forma similar a como funcionan en Photoshop y otras aplicaciones de edición de imágenes. El valor tonal determina lo que debe representar una máscara. Cuanto más brillante sea el valor tonal, mayor será la transparencia. El blanco significa 100 por ciento de visibilidad y el negro significa que no hay visibilidad. Cuando coloca un rectángulo negro que llena la página y coloca texto blanco delante de él, obtiene una máscara que no cubre el texto.

<defs>
 <pattern id="muster" width="5" height="5" patternUnits="userSpaceOnUse">
   <line x1="0" y1="0" x2="5" y2="5" stroke="yellow" />
 </pattern>
 <mask id="maske">
   <rect fill="white" />
   <text x="50%" y="50%" fill="black">Dr. Web</text>
  </mask>
</defs>

En contraste con el primer ejemplo, el texto es parte de la máscara y no un elemento que se muestra de forma independiente. En el último paso, la máscara debe asignarse a un elemento a través del atributo «máscara». En este caso, el elemento es otro rectángulo de relleno de página. Este cuadrado se llena con el patrón a través de «relleno».

defs + rect {
  fill: url(#pattern);
  mask: url(#mask);
}

 

En el ejemplo, el rectángulo que se muestra en el área de dibujo recibe la máscara con el ID „máscara“ a través del atributo „máscara“, así como el patrón con el ID „patrón“ a través del „relleno“. Es importante que los rectángulos usados ​​y sus elementos principales tengan el 100 por ciento de ancho y alto para que el patrón pueda cubrir toda la página. Como el texto es parte de la máscara aquí, el texto no se puede seleccionar en este caso.

Recortar texto con trazados

Además de máscaras, SVG conoce rutas de recorte. Estos también funcionan de manera similar a como lo hacen en Photoshop. Un trazado de recorte define un trazado que se utiliza para recortar un elemento, un texto, por ejemplo, para que coincida con la forma del trazado. Para hacer eso, se define una ruta de recorte en el área „“ a través de „“.

<defs>
  <clipPath id="pfad">
    <circle cx="33%" cy="50%" r="150" />
    <circle cx="66%" cy="50%" r="150" />
  </clipPath>
</defs>

Esto puede contener rutas aleatorias que se suman y, por lo tanto, dan como resultado la ruta de recorte. Posteriormente, el trazado de recorte se asigna a un elemento mediante el atributo «trazado de recorte».

En este ejemplo, un texto de varias líneas se recorta para que coincida con la forma de dos círculos superpuestos. El ID de la ruta de recorte se asigna al elemento „“ mediante el atributo CSS „clip-path“.

text {
  clip-path: url(#pfad);
}

Por supuesto, este efecto de recorte también se puede lograr con una máscara. Sin embargo, las máscaras siempre requieren un área en blanco y negro. Esto significa que necesita varias formas, todas las cuales deben tener un color adjunto. Todo lo que necesita para un trazado de recorte es un camino.

Compatibilidad con navegador

Lo bueno es que todos los navegadores recientes admiten elementos „“, así como „“ y „“. Solo para navegadores más antiguos, es posible que se necesite un respaldo, que puede consistir en un texto simple o un gráfico.

Juega con estos ejemplos en Codepen

• Patrones SVG como fondo
• Patrones SVG con texto recortado
• Trazados de recorte SVG

(dpe)

Este artículo fue escrito originalmente en alemán para nuestra revista hermana Dr. Web.