Como mudar a cor de um elemento SVG?
Gráficos vetoriais escaláveis, às vezes conhecidos como SVG, é um formato de imagem vetorial bidimensional que pode ser usado para gerar animações. Um elemento SVG é um contêiner que especifica um novo sistema de coordenadas. Além disso, o formato XML especifica o documento SVG.
O SVG é responsável por tornar as animações do navegador mais acessíveis e úteis no mundo moderno. Jogos 2D podem ser criados em um documento HTML usando um arquivo SVG. Ele fornece várias maneiras de criar caminhos, círculos, retângulos e outras formas. Mais especificamente, oferece gerenciamento de eventos no documento e é independente da resolução.
Este post explicará o método para alterar a cor de um elemento SVG.
Como alterar/modificar a cor de um elemento SVG?
Para modificar a cor de um elemento SVG, adicione o “”Elemento e depois define o caminho com a ajuda do“" elemento. Em seguida, acesse esses elementos no CSS e aplique o “preencher”Propriedade e definir“mostrar”.
Para praticidade, siga as instruções dadas abaixo.
Etapa 1: inserir “” elemento
Insira o "”Elemento e adicione os seguintes atributos dentro do“”Tag de abertura:
- ““ViewBox" é um "svg”Propriedade utilizada para escalar o elemento SVG para definir as coordenadas, bem como a largura e a altura.
- ““XML: espaço”É aplicado a um elemento com o valor“preservar”, O espaço em branco no conteúdo desse elemento deve ser retido como é pelo aplicativo que o processa.
- ““largura e altura”Propriedades definem o tamanho do elemento em HTML.
- ““Ativar para trás”Determina o acúmulo da imagem de fundo que é gerenciada.
Etapa 2: Adicionar caminho
Insira o "" elemento. Em seguida, especifique os atributos listados abaixo:
- O "eu ia”O atributo é usado para identificar exclusivamente o elemento específico. Para fazer isso, o valor do atributo de identificação é definido como “ícone”
- ““d”Define um caminho a ser desenhado:
Saída
Etapa 4: aplique a propriedade "preencher"
Acesse o caminho com a ajuda de “#ícone”E aplique o CSS“preencher”Propriedade e defina o valor de acordo com sua escolha:
#iconpreenchimento: rgb (18, 3, 230);
Etapa 5: Defina "Exibição" do elemento "SVG"
Agora, acesse o SVG com a ajuda do nome da classe como “.SVG-Alternate”:
.svg-alternateMostrar nenhum;
Então, aplique o “mostrar”Propriedade utilizada para determinar o comportamento de exibição de um elemento.
Etapa 6: Elemento de estilo “SVG”
Acesse os dois “svg”Classe pelo nome e aplique propriedades de menção:
.svg .svg-alternateexibição: bloco;
Largura: 150px;
Altura: 150px;
Aqui:
- ““mostrar”É utilizado para determinar o comportamento de exibição de um elemento.
- ““largura" e "altura”Define o tamanho do elemento.
A imagem resultante mostra que a cor da imagem SVG foi alterada com sucesso:
Isso se trata de mudar a cor de um elemento SVG.
Conclusão
Para mudar a cor de um elemento SVG, adicione o “”Elemento e depois define o caminho com a ajuda do“" elemento. Por fim, acesse esses elementos no CSS e aplique o “preencher”Propriedade e definir“mostrar”. Este post demonstrou o método para alterar a cor de um elemento SVG aplicando propriedades CSS.