Color css svg
Ejemplo 1
Para comenzar a escribir HTML, abra el código de Visual Studio y cree un archivo nuevo y elija HTML como idioma. El archivo ha sido creado, y todo lo que queda es agregar el "!"Marque en este archivo vacío que se crea aquí para obtener las etiquetas básicas. Después, presionar "Enter" hace que todas las etiquetas básicas del HTML aparezcan en el archivo. El cuerpo es donde comenzamos el proceso de codificación. Colocamos un encabezado y la etiqueta "SVG". Esta etiqueta "SVG" se usa aquí para definir el contenedor para la imagen SVG. Ponemos el "círculo" dentro de la etiqueta "SVG" para crear un círculo SVG. Y luego cierre la etiqueta "SVG". Ahora, estamos creando el archivo CSS y comenzamos a codificar en el archivo CSS para aplicar el color a este círculo SVG. También vinculamos el archivo CSS a este archivo HTML actual utilizando la etiqueta "Enlace" en el "Cabeza."
Aquí está el código CSS en el que establecemos el "ancho" del "SVG" como "300px" y la "altura" de este "SVG" es "300px". Estamos usando "trazo" aquí porque cuando tenemos que agregar algo de borde a este círculo "SVG". Establecemos el valor de "trazo" como "rojo."También establecemos su ancho usando el" ancho de trazo ", y establecemos este" ancho de trazo "en" 4px ". Ahora, estamos coloreando este círculo SVG con la ayuda de la propiedad "relleno" de CSS. Usamos esta propiedad de "llenar" cuando tenemos] para colorear cualquier gráfico SVG. Aquí tenemos el círculo SVG, y estamos agregando color a este círculo SVG, por lo que usamos la propiedad de "llenar". Establecemos este valor de propiedad de "llenar" como "amarillo."
Puedes ver el círculo en la salida; El color de este círculo SVG es amarillo porque agregamos este color utilizando la propiedad de "llenar" en CSS, y el borde de este círculo SVG está en color rojo porque utilizamos la propiedad "trazo" en el código CSS.
Ejemplo 2
Estamos creando dos SVG rectangulares aquí colocando el "Div" y dentro de este "Div", tenemos dos "SVGS diferentes."Usamos" Rect "para crear un rectángulo. Aquí usamos dos Rect con los nombres "Rect1" y "Rect2" dentro del SVG y luego cerramos el "Div" aquí. Ahora, aplicaremos diferentes colores a estos SVG rectangulares utilizando las propiedades CSS.
Alineamos todos los elementos de "cuerpo" con el "centro."Luego, aplicamos el color" rojo "al encabezado, y" argelino "que usamos como" Fontamilia."También diseñamos esto en la que se dirige a" cursiva."La" altura "del primer" rect1 "SVG es" 300px ", y el" ancho "que estamos usando aquí es" 500px ". "Llenamos" este rectángulo con "amarillo", ya que es la forma de SVG, por lo que usamos "llenar" aquí. Luego establecemos la misma altura y ancho al siguiente rectángulo SVG y "llenamos" este rectángulo con "Purple."
Hay dos rectángulos SVG en la salida. Usamos las propiedades CSS para colorear estos rectángulos SVG. Ambos rectángulos son SVGS.
Ejemplo 3
En este código, estamos creando un polígono SVG, por lo que usamos la etiqueta "SVG" y creamos un "polígono" aquí definiendo los puntos del polígono y luego cerrando la etiqueta "SVG".
Estamos utilizando la fuente "argelina" y el color "púrpura" para el encabezado. Establecimos el "SVG" "ancho" y "altura" como "300px" y "200px", respectivamente. Luego usamos la propiedad de "llenar". Establecemos este "relleno" en "rosa" para que el color polígono aparezca "rosa."También ponemos algunos bordes para este polígono, por lo que estamos usando" trazo "para dar el color del borde, que establecemos como" púrpura."Establecimos el ancho de este borde utilizando la propiedad de" ancho de accidente cerebrovascular "y lo establecemos en" 5 ". Luego usamos la "regla de relleno", que se usa para determinar la parte interior del polígono, y lo establecemos en "Even-Odd."
Aquí, ves una estrella que también se llama polígono. Este polígono es el polígono SVG, y coloreamos este polígono SVG aquí en este ejemplo utilizando la propiedad "relleno".
Ejemplo 4
Vamos a generar tres iconos diferentes aquí, por lo que estamos usando la etiqueta "I" en este archivo HTML. Damos diferentes nombres a cada icono, entonces; Estableceremos un color diferente para cada icono SVG.
Primero establecemos el "ícono", "ancho" y "altura", y ambos están configurados como "100px". También establecemos estos íconos en una línea, por lo que usamos la propiedad "Display" y la establecemos en "Bloque en línea."Ahora, en el" WebKit-Mask ", damos la" URL "de la imagen SVG y establecemos el" tamaño de WebKit-Mask "en" Cubra."Además, el" tamaño de máscara "es" portada "aquí. Luego vamos a aplicar colores a estos iconos SVG con la ayuda de la propiedad "Color de fondo". Establecimos "Rojo" para el primer icono SVG, "Pink" como el "color de fondo" para el segundo icono SVG y el color "amarillo" para el tercer icono SVG.
Los tres iconos SVGS aparecen en diferentes colores porque colocamos estos colores en CSS aplicando la propiedad de color de fondo a todos estos íconos por separado.
Ejemplo 5
Aquí, estamos usando la versión "XML" y luego damos la ruta del icono SVG aquí, y luego cambiaremos el color de este icono en el flujo, y esto se hará en el código CSS.
Establecemos el color de este icono utilizando la propiedad "relleno", ya que es el icono SVG, por eso estamos usando "llenar" aquí. Lo establecemos "Negro."Este icono aparecerá en negro. También usamos "flotar" con este "ícono" y establecemos "llenar" "naranja", por lo que cuando flotamos el mouse sobre este icono SVG, el color de esto cambiará a "naranja", como hemos establecido "naranja" aquí en el "relleno" de "flotar."Los conjuntos de" alineación de texto "en" Center ", y el" relleno "que estamos usando aquí es" 2em ".
La primera salida se muestra antes de flotar, y puede notar que el color de este icono SVG aparece en negro, que hemos establecido en el código CSS, pero cuando pasamos a pasar por este icono SVG, su color cambia, y puede ver esto en la siguiente salida.
En esta segunda salida, el color del icono SVG hace que "naranja" establecemos "naranja" como "llenarse" cuando nos desplazamos sobre este icono SVG en CSS.
Conclusión
Este tutorial fue creado para ayudarlo a comprender las propiedades de CSS, lo que nos permite colorear el SVG. Este tutorial ha cubierto este concepto con gran profundidad. Hemos presentado cinco ejemplos diferentes aquí en los que diseñamos diferentes SVG y luego coloreamos esos SVG, y hemos cambiado el color de diferentes iconos SVGS. Hemos proporcionado las salidas de todos estos códigos en este tutorial. Hemos utilizado dos propiedades aquí para aplicar el color a los SVG, que eran propiedades de "llenar" y "color de fondo", y las explicaron en detalle aquí. Después de seguir cuidadosamente este tutorial, espero que pueda colorear SVGS utilizando estas propiedades en CSS.