Efectos de los filtros SVG. Parte 2. Esquema de texto con feMorfología

La serie de artículos propuesta, " Efectos de filtrado SVG " , de Sara Soueidan, un desarrollador independiente de interfaz UI / UX y autor de muchos artículos técnicos con sede en Líbano, se centra en el trabajo de los filtros SVG y consta de los siguientes artículos:


Efectos de filtrado SVG


  1. Efectos de filtrado SVG. Parte 1. Filtros SVG 101 .
  2. Efectos de filtrado SVG. Parte 2. Esquema de texto con feMorfología
  3. Efectos de filtrado SVG. Parte 3. El efecto de la posterización de la imagen usando feComponentTransfer .
  4. Efectos de filtrado SVG. Parte 4. Im√°genes a dos colores con feComponentTransfer .
  5. Efectos de filtrado SVG. Parte 5. Hacer coincidir el texto con la textura de la superficie con feDisplacementMap



En la segunda parte de la serie de filtros SVG, Sara Soueidan nos presenta el filtro de femorfología y da algunos ejemplos de cómo usarlo para crear efectos interesantes.



En la primera parte de esta serie sobre los efectos de los filtros SVG, presentamos los conceptos básicos de los filtros SVG: cómo crearlos y cómo usarlos. También examinamos algunas de las operaciones de filtrado más utilizadas, es decir, Filtrar primitivas. Porque Dado que reutilizaremos esta información, recomiendo detenerse y leer ese artículo antes de pasar a este.


<feMorphology> es una de mis operaciones de filtro SVG favoritas. También es una de las operaciones más simples, y los resultados de su aplicación a varios elementos son siempre predecibles.


¬ŅQu√© es morphing?


Morphing significa transformar o cambiar la forma o apariencia de un objeto.


El filtro morfológico opera en la forma del objeto. Proporciona dos transformaciones de forma predefinidas: erosión (es decir, adelgazamiento o reducción) y expansión (es decir, A. engrosamiento o expansión). En otras palabras, la primitiva feMorfología se puede usar para comprimir o expandir un elemento.


T√©cnicamente hablando, ambas operaciones funcionan a nivel de p√≠xel, expandiendo el p√≠xel a p√≠xeles vecinos ( dilatar ) o destruyendo p√≠xeles vecinos a lo largo de los bordes del p√≠xel erosionado , mientras se mantiene el contorno en el borde de ese p√≠xel. El par√°metro de radio determina el valor por el cual el p√≠xel se expande, o el n√ļmero de p√≠xeles vecinos utilizados para "estirar" o "expandir" el p√≠xel.


<feMorphology in=".." result=".." operator="dilate || erode" radius=""> </feMorphology> 

El radio de transformación se puede representar como el radio de un círculo o una elipse. Todos los píxeles vecinos encerrados en un círculo de este radio, comenzando desde el píxel de entrada, se consideran una sola comunidad de píxeles y se utilizarán en el efecto de expansión o erosión.


Sin embargo, de hecho, el radio en realidad caracteriza el tama√Īo del n√ļcleo, llamado elemento estructurante, que se parece m√°s a una matriz. Por ahora, es suficiente representarlo como un peque√Īo rect√°ngulo, cuyo ancho y alto est√°n especificados por los p√≠xeles especificados en el atributo de radio .


Para usar un filtro, no necesitamos profundizar en las tediosas cositas que hace la transformaci√≥n a nivel de p√≠xel. Es suficiente saber que puede proporcionar uno o dos valores de radio en feMorfolog√≠a , lo que determinar√° la cantidad por la cual el elemento se comprimir√° o expandir√°. Si se especifican dos n√ļmeros en el atributo de radio , el primero corresponder√° al radio xy el segundo al radio y.


Imagen Morph


Si la operación de feMorfología se aplica a las imágenes, entonces, como regla, se obtendrán dos resultados predecibles:


  • El tama√Īo de la imagen disminuye si se usa el operador de erosi√≥n , o aumenta si se usa el operador de dilataci√≥n .
  • Con cualquier operador, la imagen parece pintada con un pincel grande, con una peque√Īa cantidad de peque√Īos detalles.

Por lo tanto, para aplicar el efecto de transformación a la imagen, nuestro código debería verse así:


 <svg width="450" height="300" viewBox="0 0 450 300"> <filter id="erode"> <feMorphology operator="erode" radius="3"></feMorphology> </filter> <image xlink:href="..." width="90%" height="90%" x="10" y="10" filter="url(#erode)"></image> </svg> 

En este fragmento, desenfocamos (comprimimos) la imagen (en p√≠xeles) en 3 p√≠xeles. La siguiente figura muestra el resultado de este c√≥digo. Tenga en cuenta que el tama√Īo de la imagen a la derecha es ligeramente m√°s peque√Īo:


A la derecha, el resultado de aplicar el efecto de desenfoque de transformación a la imagen de la izquierda
Fig_2. A la derecha, el resultado de aplicar el efecto de desenfoque de transformación a la imagen de la izquierda.


Ahora, si mantenemos el mismo radio de transformación y cambiamos el operador de erosionar a dilatar , el efecto será similar, pero también claramente diferente:



Fig_3. A la derecha, el resultado de aplicar la operación dilate morph a la imagen de la izquierda.


En ambos casos, la imagen parece una versi√≥n abstracta pintada de s√≠ misma, y ‚Äč‚Äčsu tama√Īo general cambia a medida que los p√≠xeles se expanden o contraen.


Pero además de estos resultados, lo primero que probablemente notará es la diferencia de color que resulta de cada uno de estos dos efectos: erosionar crea una imagen con muchos píxeles oscuros, mientras que la dilatación ilumina el resultado. Esto se debe al hecho de que:


  • erosionar (este valor se usa por defecto) establece para cada p√≠xel el brillo m√°s bajo o la opacidad m√°s alta de su comunidad, respectivamente, para cada uno de los canales R, G, B y A;
  • dilatar establece para cada canal de cada p√≠xel los valores correspondientes al valor m√°s brillante o menos transparente de su comunidad.

Dejando de lado los detalles t√©cnicos, la aplicaci√≥n de FeMorfolog√≠a a las im√°genes casi siempre tendr√° el mismo resultado: comprimir o estirar peque√Īas partes de una imagen como una copia de una imagen con un contorno principal oscuro o claro.



Sin embargo, al aplicar feMorfología a elementos monocromáticos, como el texto, solo se comprime o estira sin realizar cambios notables en el color de los píxeles, porque todavía solo tenemos un color para trabajar ...


Agregar un esquema de color al texto con feMorfología


Ahora podemos agregar un esquema al texto en el SVG usando el atributo de trazo para este texto.


 <!-- Adding an outline to SVG text using strokes --> <text font-size="80px" dx="100" dy="200" font-weight="700" stroke="deepPink" stroke-width="3px">Stroked Text</text> 

Agregar una ruta que generalmente se centra alrededor de los bordes del texto para que la mitad de su grosor se superponga con el texto en s√≠ mismo hace que el texto sea m√°s delgado, incluso si no fue dise√Īado. En cambio, podemos dilatar el texto al grosor del contorno o trazo usando feMorfolog√≠a .


A menos que se especifique lo contrario, el texto generalmente tiene un color. Entonces, aplicado al texto, feMorfología le permite reducir o aumentar el grosor del texto. Una vez que el texto se ha expandido con feMorfología , se puede usar como entrada para otras primitivas de filtro para crear un esquema de texto, que es lo que necesitábamos.


Antes de profundizar en cómo hacer esto, eche un vistazo al gráfico que muestra la diferencia entre el texto con el contorno en círculo y el contorno agregado con feMorfología .


Comparar el texto fuente con el texto con un trazo y el esquema creado con ** feMorfología **
Fig_4. Comparación del texto fuente con el texto con un trazo y el esquema creado con feMorfología .


Tenga en cuenta que el texto fuente en la segunda línea se ha vuelto más delgado después de agregar un contorno suave, en comparación con el texto de la tercera línea, expandido con feMorfología .


Entonces, vamos a crear paso a paso un fragmento de texto coloreado con un esquema. Aquí está el resultado que buscaremos:


Resultado final
Fig_5. El resultado final.


Entonces, crearemos un SVG que contenga nuestro texto y un filtro que comience una operaci√≥n de extensi√≥n simple. El tama√Īo de la extensi√≥n de texto depende del grosor del contorno que queremos obtener.


 <svg width="900" height="200" viewBox="100 0 900 200"> <filter id="outline"> <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="4"></feMorphology> </filter> <!-- DILATED TEXT --> <text font-size="85px" dx="125" dy="130" font-weight="700" filter="url(#outline)">upgrade yourself</text> </svg> 

El código anterior obtendrá el canal alfa del texto, que es solo una versión en negro del texto, y aumenta el grosor de la fuente en 4px. El resultado del código en esta etapa es el siguiente:


Texto después de engrosar
Fig_6. Texto después del engrosamiento.


... en comparación con el texto fuente, que tiene un color de relleno azul oscuro:


Texto fuente
Fig_7. Texto fuente


Para crear un efecto de contorno, superponemos el texto fuente en la parte superior del texto expandido, dejando solo los bordes del texto expandido (nuestros 4px adicionales) visibles alrededor del texto fuente, haciendo que se vean como una ruta. La superposición de texto sobre su contorno (texto extendido) se realizará utilizando feMerge . Cómo se hace esto lo examinamos en un artículo anterior .


Lo que más debemos hacer antes de colocar el contorno alrededor del texto es colorearlo. Tal como lo hicimos en el artículo anterior, llene el área del filtro con el color deseado y luego agregue la capa de color con la capa de texto ya expandida, es decir. nuestro circuito usando el operador in . Como resultado, solo se mostrarán aquellas partes del relleno de color que se cruzan con el texto expandido, coloreándolo así. Luego, combinamos el contorno de color resultante con el texto fuente para obtener el resultado deseado.


Ahora nuestro código se ve así:


 <svg width="900" height="200" viewBox="100 0 900 200"> <filter id="outline"> <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="4"></feMorphology> <feFlood flood-color="#32DFEC" flood-opacity="1" result="PINK"></feFlood> <feComposite in="PINK" in2="DILATED" operator="in" result="OUTLINE"></feComposite> <feMerge> <feMergeNode in="OUTLINE" /> <feMergeNode in="SourceGraphic" /> </feMerge> </filter> <!-- DILATED TEXT --> <text font-size="85px" dx="125" dy="130" font-weight="700" filter="url(#outline)">upgrade yourself</text> </svg> 

El proceso de creaci√≥n de efectos de filtrado en SVG consiste en representar el resultado final en forma de peque√Īas operaciones secuenciales, utilizando el resultado de una operaci√≥n como entrada a otra y, finalmente, combinando todas las capas creadas por ellas para lograr el resultado final.


Y aquí está la demostración del código anterior:



El color de relleno del texto se puede especificar en su CSS o en el elemento de texto utilizando el atributo de relleno . El color del contorno se puede establecer en el atributo de color de inundación de la primitiva feFlood .


Genial ¬ŅY si quieres cambiar el color del contorno? Tendr√° que usar el primitivo feFlood nuevamente y combinar el relleno de color con el contorno. Y cada vez que desee cambiar el color del contorno, debe hacer lo mismo una y otra vez. Esto, sin duda, es demasiado agotador. Afortunadamente, hay una manera m√°s f√°cil.


Noqueando texto


Además de agregar un contorno al texto, también podemos crear un contorno, es decir texto en relieve, lo que significa que el interior del texto se "recortará" para que pueda ver el fondo detrás del contorno. Un ejemplo de tal efecto puede verse como texto en el siguiente GIF, que muestra un cambio en el color de fondo y cómo se puede ver este fondo dentro de nuestro texto. Aquí está la demostración que crearemos en esta sección:


Ejemplo de texto en relieve
Fig_8. Un ejemplo de texto en relieve.


Este efecto es más fácil de crear, y el código necesario para ejecutarlo es notablemente más corto. La principal diferencia aquí es que, en lugar de superponer el texto de origen sobre el texto expandido, usaremos el mismo texto de origen para recortar las partes internas del texto expandido. Esto significa que solo quedará el grosor agregado del texto expandido, y la parte interna se eliminará, dejándonos solo el contorno.


Si en lugar de capturar y expandir el canal Alfa del texto (que es negro por defecto), captura el texto de origen en sí (¡que puede tener cualquier color de relleno!), Expanda y luego use el texto nuevamente para recortar el interior del texto expandido, obtendrá un contorno, que proviene del código fuente en sí. Esto significa que el color de esta ruta siempre coincidirá con el color del texto de origen. Y dado que podemos determinar el color de relleno del texto fuente en CSS, esto significa que tiene un esquema de texto que es independiente de sus estilos. (¡Hurra en la separación de las preocupaciones!) Luego puede aplicar este filtro a cualquier parte del texto y cambiar el color de este texto en CSS en cualquier momento, sin la necesidad de configurar el código del filtro. Nuestro código mejorado ahora se ve así:


 <svg width="900" height="450" viewBox="0 0 900 450"> <filter id="outliner"> <!-- Start by grabbing the alpha channel of the text and dilating it--> <feMorphology operator="dilate" radius="8" in="SourceAlpha" result="THICKNESS" /> <!-- Next, grab the original text (SourceGraphic) and use it to cut out the inside of the dilated text --> <feComposite operator="out" in="THICKNESS" in2="SourceGraphic"></feComposite> </filter> <text dx="100" dy="300" filter="url(#outliner)" letter-spacing="10px">SVG Rocks</text> </svg> 

Usando una buena fuente, nuestra demostración ahora se ve así:



Fig_9. El resultado de nuestro trabajo.


En nuestra hoja de estilo, podemos elegir el color del contorno y el color de fondo del SVG. También puede seleccionar imagen por texto dentro del SVG. En el siguiente código, uso animaciones CSS sin ninguna razón para cambiar el color de fondo, excepto que es hermoso.


 svg text { font-family: 'Bangers', cursive; font-size: 150px; letter-spacing: 13px; fill: #000; /* This fill color determines the color of the outline */ } svg { background-color: gold; animation: colorsssss 2s linear infinite; animation-delay: 3s; } @keyframes colorsssss { 50% { background-color: deepPink; } } 

El filtro SVG anterior es reutilizable a través de SVG al igual que HTML. Si desea aplicarlo a un elemento HTML, puede hacerlo utilizando la propiedad de filtro ; simplemente ponga el filtro en HTML y "llámelo" en CSS:


 h2 { filter: url(#outliner); /* You can change the color of the outline here by changing the color of the heading */ color: deepPink; } 

Y nuestra demostración finalizada, que incluye un encabezado HTML con un filtro aplicado:



Lo que m√°s me gusta de esta receta de filtro es que puede usarse como una mejora visual. Si el navegador no admite filtros SVG, o no admite filtros CSS, o no admite la aplicaci√≥n de filtros SVG a elementos HTML, el usuario recibir√° el texto fuente sin los contornos y el efecto transl√ļcido aplicado. Ah, y la guinda del pastel encima? Tanto el texto SVG como el HTML se podr√°n buscar y editar completamente. ¬°Hurra mejora progresiva! ¬°Viva el SVG!


Conclusión


Usando solo dos operaciones de filtrado en SVG, puede aplicar el efecto del texto seleccionado al contenido de texto de SVG o HTML. Pon este filtro en HTML y √ļsalo cuando lo necesites.


En el próximo artículo de esta serie, veremos feComponentTransfer , una de mis primitivas de filtro favoritas, y veremos cómo funciona y qué efectos podemos crear con él. Quédate con nosotros

Source: https://habr.com/ru/post/439722/


All Articles