SVG significa Gráfico vectorial escalable. Se puede usar para hacer gráficos y animaciones como en el lienzo HTML.
El elemento SVG <feMorphology> le permite «adelgazar» o «engrosar» un gráfico. Especifica un operador con un valor de erosionar para adelgazar o dilatar para engrosar un gráfico. El atributo de radio nos dice cuánto se van a engrosar o adelgazar las líneas, también ayuda a hacer una animación para cambiar los píxeles de la imagen.
¿Qué es el Morphing?
Transformarse significa transformar o alterar la forma o la forma de un objeto.
Sintaxis:
<defs>
<!--erode-->
<filter id="erode">
<feMorphology operator="erode" radius="1" />
</filter>
<!--dilate-->
<filter id="dilate">
<feMorphology operator="dilate" radius="2" />
</filter>
</defs>
Atributos:
- Atributos globales: algunos atributos globales se utilizan como atributos principales y atributos de estilo, etc.
- Atributos específicos: se utiliza para cambiar los atributos de entrada, tipo y valores.
El objeto SVG <feMorphology> Element tiene estas propiedades:
- altura: Obtiene o establece la altura de un elemento.
- in1: identifica la entrada para la primitiva de filtro dada.
- operador: especifica la operación de adelgazar o espesar.
- Radio X: especifica el engrosamiento o adelgazamiento que desea aplicar en la dirección X.
- Radio Y: especifica el engrosamiento o adelgazamiento que desea aplicar en la dirección Y.
- resultado: proporciona una referencia para el resultado de salida de un filtro.
- ancho: Define el ancho de un elemento.
- x: Obtiene o establece el valor de la coordenada x.
- y: Obtiene o establece el valor de la coordenada y.
Ejemplo 1: Erode ayuda a reducir el tamaño de la imagen (dimensiones):
HTML
<!DOCTYPE html> <html> <body> <svg width="450" height="300" viewBox="0 0 450 300"> <filter id="morphology"> <feMorphology operator="erode" radius="0"> <animate attributeName="radius" from="0" to="5" dur="5s" repeatCount="indefinite" /> </feMorphology> </filter> <image xlink:href= "https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/GeeksforGeeks.svg/2560px-GeeksforGeeks.svg.png" width="90%" height="90%" x="10" y="10" filter="url(#morphology)"></image> </svg> </body> </html>
Producción:
Ejemplo 2: En Dilate hay ayuda para hacer que el tamaño de la imagen (dimensión) sea más grande:
HTML
<!DOCTYPE html> <html> <body> <svg width="450" height="300" viewBox="0 0 450 300"> <filter id="morphology2"> <feMorphology operator="dilate" radius="0"> <animate attributeName="radius" from="0" to="5" dur="5s" repeatCount="indefinite" /> </feMorphology> </filter> <image xlink:href= "https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/GeeksforGeeks.svg/2560px-GeeksforGeeks.svg.png" width="90%" height="90%" x="10" y="10" )"></image> </svg> </body> </html>
Producción:
Ejemplo 3: Esta es la ilustración de los dos ejemplos anteriores en uno:
HTML
<!DOCTYPE html> <html> <body> <svg width="450" height="300" viewBox="0 0 450 300"> <filter id="morphology2"> <feMorphology operator="dilate" radius="0"> <animate attributeName="radius" from="0" to="5" dur="5s" repeatCount="indefinite" /> </feMorphology> </filter> <image xlink:href= "https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/GeeksforGeeks.svg/2560px-GeeksforGeeks.svg.png" width="90%" height="90%" x="10" y="10" )"> </image> </svg> <svg width="450" height="300" viewBox="0 0 450 300"> <filter id="morphology"> <feMorphology operator="erode" radius="0"> <animate attributeName="radius" from="0" to="5" dur="5s" repeatCount="indefinite" /> </feMorphology> </filter> <image xlink:href= "https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/GeeksforGeeks.svg/2560px-GeeksforGeeks.svg.png" width="90%" height="90%" x="10" y="10" filter="url(#morphology)"> </image> </svg> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rudrakshladdha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA