Cor svg css
Exemplo 1
Para começar a escrever HTML, abra o código do Visual Studio e crie um novo arquivo e escolha HTML como o idioma. O arquivo foi criado, e tudo o que resta é anexar o “!”Marque neste arquivo vazio que é criado aqui para obter as tags básicas. Depois, pressionar "Enter" faz com que todas as tags básicas do HTML apareçam no arquivo. O corpo é onde começamos o processo de codificação. Colocamos uma tabela e a tag "SVG". Esta tag "SVG" é usada aqui para definir o contêiner para a imagem SVG. Colocamos o "círculo" dentro da tag "SVG" para criar um círculo SVG. E depois feche a tag "SVG". Agora, estamos criando o arquivo CSS e começando a codificação no arquivo CSS para aplicar a cor a este círculo SVG. Também vinculamos o arquivo CSS a este arquivo HTML atual, utilizando a tag "Link" na "cabeça.”
Aqui está o código CSS em que definimos a "largura" do "SVG" como "300px" e a "altura" deste "SVG" é "300px". Estamos usando o "golpe" aqui, porque quando precisamos adicionar alguma borda a este círculo "SVG". Definimos o valor do "golpe" como "vermelho."Nós também definimos sua largura usando a" largura de derrame "e definimos essa" largura de golpe "para" 4px ". Agora, estamos colorindo este círculo SVG com a ajuda da propriedade "preenchimento" do CSS. Usamos esta propriedade "preenchimento" quando temos] para colorir qualquer gráfico SVG. Aqui temos o círculo SVG e estamos adicionando cores a este círculo SVG, por isso usamos a propriedade "Fill". Definimos esse valor de propriedade "preencher" como "amarelo.”
Você pode ver o círculo na saída; A cor deste círculo SVG é amarela porque adicionamos essa cor usando a propriedade "preenchimento" no CSS, e a borda deste círculo SVG está na cor vermelha porque usamos a propriedade "AVC" no código CSS.
Exemplo 2
Estamos criando dois SVGs de retângulo aqui colocando o "div" e dentro deste "div", temos dois "SVGs diferentes.”Usamos“ Rect ”para criar um retângulo. Aqui usamos dois recriados com os nomes "RECT1" e "RECT2" dentro do SVG e depois feche o "div" aqui. Agora, aplicaremos cores diferentes a esses SVGs retângulo usando as propriedades CSS.
Alinhamos todos os elementos "do corpo" ao "centro.”Então, aplicamos a cor“ vermelha ”ao título e“ argeliano ”que usamos como a“ família de fontes."Nós também estilizamos isso para" itálico."A" altura "do primeiro" RECT1 "SVG é" 300px "e a" largura "que estamos usando aqui é" 500px ". Nós “enchemos” esse retângulo com “amarelo”, pois é a forma do SVG, então usamos “preenchimento” aqui. Em seguida, definimos a mesma altura e largura para o próximo retângulo SVG e "encher" este retângulo com "roxo.”
Existem dois retângulos SVG na saída. Usamos as propriedades CSS para colorir esses retângulos SVG. Ambos os retângulos são SVGs.
Exemplo 3
Neste código, estamos criando um polígono SVG, por isso usamos a tag "SVG" e criamos um "Polygon" aqui, definindo os pontos do polígono e depois fechando a tag "SVG".
Estamos utilizando a fonte "argelina" e a cor "roxa" para o cabeçalho. Definimos o "SVG" "Width" e "Height" como "300px" e "200px", respectivamente. Então usamos a propriedade "preenchimento". Definimos esse "preenchimento" para "rosa" para que a cor do polígono pareça "rosa.”Também colocamos algumas fronteiras para este polígono, por isso estamos usando o“ golpe ”para dar a cor da fronteira, que definimos como“ roxo.”Definimos a largura desta fronteira utilizando a propriedade“ largura de derrame ”e a definimos como“ 5 ”. Em seguida, usamos o “preenchimento”, que é usado para determinar a parte interna do polígono e defini-lo como “equilibrado.”
Aqui, você vê uma estrela que também é chamada de polígono. Este polígono é o polígono SVG, e colorimos esse polígono SVG aqui neste exemplo usando a propriedade "preenchimento".
Exemplo 4
Vamos gerar três ícones diferentes aqui, então estamos usando a tag "i" neste arquivo html. Damos nomes diferentes para cada ícone, então; Vamos definir uma cor diferente para cada ícone SVG.
Primeiro definimos o "ícone", "largura" e "altura" e ambos são definidos como "100px". Também definimos esses ícones em uma linha, por isso usamos a propriedade "Display" e a configuramos como "Block inline."Agora, no" webkit-mask ", damos o" URL "da imagem SVG e definimos o" tamanho do webkit-mask "para" capa."Além disso, o" tamanho da máscara "é" capa "aqui. Em seguida, aplicaremos cores a esses ícones SVG com a ajuda da propriedade “Background-Color”. Definimos "vermelho" para o primeiro ícone SVG, "rosa" como a "cor de fundo.
Todos os três ícones SVGs aparecem em cores diferentes porque definimos essas cores no CSS aplicando a propriedade cor de fundo a todos esses ícones separadamente.
Exemplo 5
Aqui, estamos usando a versão "XML" e depois damos o caminho do ícone SVG aqui, e então mudaremos a cor desse ícone em pairar, e isso será feito no código CSS.
Definimos a cor deste ícone usando a propriedade "preenchimento", pois é o ícone SVG, é por isso que estamos usando "preenchimento" aqui. Nós definimos “preto.”Este ícone aparecerá em preto. Também usamos "pairar" com esse "ícone" e definir "preencher" "laranja", então quando o mouse o mouse sobre esse ícone SVG, a cor disso mudará para "laranja", como definimos "laranja" aqui No "preenchimento" de "Passe o Passeio."Os conjuntos" textos "para" Center "e o" preenchimento "que estamos usando aqui é" 2em ".
A primeira saída é exibida antes de pairar, e você pode notar que a cor desse ícone SVG aparece em preto, que definimos no código CSS, mas quando passamos o mouse sobre esse ícone SVG, sua cor muda, e você pode ver isso em a próxima saída.
Nesta segunda saída, a cor do ícone SVG renderiza "laranja" porque definimos "laranja" como "enchimento" quando passamos o mouse sobre esse ícone SVG no CSS.
Conclusão
Este tutorial foi criado para ajudá -lo a entender as propriedades do CSS, o que nos permite colorir o SVG. Este tutorial cobriu esse conceito em grande profundidade. Apresentamos cinco exemplos diferentes aqui nos quais projetamos diferentes SVGs e depois colorimos esses SVGs, e mudamos a cor de diferentes ícones SVGs. Fornecemos as saídas de todos esses códigos neste tutorial. Utilizamos duas propriedades aqui para aplicar cores aos SVGs, que eram propriedades "preenchidas" e "cor de fundo", e as explicamos em detalhes aqui. Depois de seguir cuidadosamente este tutorial, espero que você consiga colorir SVGs usando essas propriedades no CSS.