Cómo cambiar el color de un elemento SVG?
Los gráficos vectoriales escalables, a veces conocidos como SVG, es un formato de imagen vectorial bidimensional que se puede utilizar para generar animaciones. Un elemento SVG es un contenedor que especifica un nuevo sistema de coordenadas. Además, el formato XML especifica el documento SVG.
SVG es responsable de hacer que las animaciones del navegador sean más accesibles y útiles en el mundo moderno. Se pueden crear juegos 2D en un documento HTML utilizando un archivo SVG. Proporciona varias formas de crear vías, círculos, rectángulos y otras formas. Más específicamente, ofrece gestión de eventos en el documento y es una resolución independiente.
Esta publicación explicará el método para cambiar el color de un elemento SVG.
Cómo cambiar/modificar el color de un elemento SVG?
Para modificar el color de un elemento SVG, agregue el ""Elemento y luego defina el camino con la ayuda del"" elemento. Luego, acceda a estos elementos en CSS y aplique el "llenar"Propiedad y establecer"mostrar".
Para la practicidad, siga las instrucciones dadas a continuación.
Paso 1: Insertar el elemento ""
Insertar el "Elemento "y agregue los siguientes atributos dentro del""Etiqueta de apertura:
- "viewbox"Es un"SVG"Propiedad que se utiliza para escalar el elemento SVG para establecer las coordenadas, así como el ancho y la altura.
- "XML: espacio"Se aplica a un elemento con el valor"preservar", El espacio en blanco en el contenido de ese elemento debe ser retenido como es por la aplicación que lo procesa.
- "anchura y altura"Las propiedades establecen el tamaño del elemento en HTML.
- "habilitar"Determina la acumulación de la imagen de fondo que se gestiona.
Paso 2: Agregar ruta
Insertar el "" elemento. Luego, especifique los atributos de la lista a continuación:
- El "identificación"El atributo se usa para identificar de manera única el elemento particular. Para hacerlo, el valor del atributo de identificación se establece como "icono"
- "d"Define un camino a dibujar:
Producción
Paso 4: Aplicar la propiedad "rellenar"
Acceder a la ruta con la ayuda de "#icono"Y aplique el CSS"llenar"Propiedad y establece el valor de acuerdo con su elección:
#iconrelleno: RGB (18, 3, 230);
Paso 5: Establecer "Pantalla" del elemento "SVG"
Ahora, acceda al SVG con la ayuda del nombre de la clase como ".svg-alternativo":
.SVG-AlternatePantalla: ninguno;
Luego, aplique el "mostrar"Propiedad que se utiliza para determinar el comportamiento de visualización de un elemento.
Paso 6: Elemento de estilo "SVG"
Acceda a los dos "SVG"Clase por su nombre y aplique las propiedades de mención:
.SVG .SVG-Alternatebloqueo de pantalla;
Ancho: 150px;
Altura: 150px;
Aquí:
- "mostrar"Se utiliza para determinar el comportamiento de visualización de un elemento.
- "ancho" y "altura"Define el tamaño del elemento.
La imagen resultante muestra que el color de la imagen SVG se ha cambiado con éxito:
Se trata de cambiar el color de un elemento SVG.
Conclusión
Para cambiar el color de un elemento SVG, agregue el ""Elemento y luego defina el camino con la ayuda del"" elemento. Por último, acceda a estos elementos en CSS y aplique el "llenar"Propiedad y establecer"mostrar". Esta publicación ha demostrado el método para cambiar el color de un elemento SVG aplicando propiedades CSS.