Pergunta de suporte do WordPress SVG: Colorir imagem SVG com CSS

Um usuário perguntou 👇

Olá, obrigado pelo seu plugin! Como posso alterar a cor da imagem SVG com CSS? Existe um tutorial?

Obrigado

(@benbodhi)

Há 1 ano

Olá,

Fico feliz que tenha gostado do meu plugin 🙂

Você pode fornecer um link para o site por favor?

É muito fácil, porém, você só precisa se concentrar na classe correta do seu elemento e aplicar a cor ou a cor de preenchimento.

Por exemplo:

.your-svg-class { fill: red; color: red; }

Você provavelmente só precisa usar um desses (preenchimento ou cor), que geralmente é preenchido, mas depende especificamente do seu SVG.

Eu espero que isso ajude. Deixe-me saber como você vai.

P.S. Estou trabalhando em um site com algumas dicas e tutoriais. Ainda não há MTE, mas está sendo feito.

(@woodypad)

Há 1 ano

Olá, O site ainda é local, mas estou usando plguin para inserir apenas ícones. Eu já tentei, como você diria, mas não funciona. Preciso salvar o arquivo svg de uma maneira específica?

Obrigado

(@benbodhi)

Há 1 ano

Olá,

É difícil dizer o que está acontecendo. Normalmente você deve ser capaz de salvar. Você pode enviar o arquivo SVG para eu testar?

(@woodypad)

Há 1 ano

Olá, tentei novamente. Dentro do WPbakery e dentro de uma seção WP normal, não há nada colorido. Estou anexando um svg de teste.

Obrigado

(@benbodhi)

Há 1 ano

Você precisa ter certeza de que o SVG está em linha ou nenhum SEC tocará nos elementos que ele contém. Você pode verificar se ele é fornecido como um código SVG ou como uma tag IMG com o SVG como src.

A SEC que afetaria os 2 elementos do seu SVG que seriam fornecidos é:

circle#Ellipse_97 {
    fill: green;
}
path#Path_461 {
    fill: blue;
}

Você pode alterar as cores para o que quiser.

Se você quiser modificar os alvos, abra seu SVG em um editor de código como texto sublime. Você pode adicionar suas próprias classes aos 2 elementos e focar neles.

(@woodypad)

Há 1 ano

Olá, desculpe, não consigo fazer funcionar… Nem mesmo com o código que você forneceu. Definitivamente, há algo que estou perdendo.

Está claro para mim como alterar o conteúdo do arquivo SVG, isso não é um problema. Mas não consigo descobrir por que não muda de cor com CSS. Algo deve ser ativado nas configurações?

Obrigado

(@benbodhi)

12 meses atrás

Olá,

Você precisaria de um modo de alto nível e precisa garantir que seu SVG seja entregue online para que você possa se concentrar nos elementos internos.

(@ graphicker29)

12 meses atrás

Eu também tenho esse problema. Implementei o modo avançado e o svg está ficando inline, mas não consigo focar nos elementos internos com CSS.

Esta resposta foi modificada há 12 meses por.

(@benbodhi)

11 meses, 4 semanas atrás

Olá @grafiker29

Você realmente deve iniciar seu próprio tópico, mesmo que pareça.

Se o seu SVG estiver embutido e você vir os elementos dentro do inspetor, tudo o que você precisa fazer é usar o CSS necessário para manipular esses elementos.

Se você tem um SVG embutido, esse é o fim da linha para o meu plugin, o resto é completamente externo.

Geralmente, se você não pode mudar algo com CSS, você precisará aumentar a especificidade.

Por exemplo, se isso não funcionar:
.your-svg-class { fill: red; }

Parece que algum CSS de alto nível já está lhe dizendo qual será a cor… Ou as cores já estão localizadas dentro do seu código SVG.

Você só precisa ser o mais específico possível. O seguinte é uma excelente versão de:
html body .your-svg-class {fill: red;}

Isso pode até não funcionar, você precisa ser específico para o código exato. Mas espero que isso ajude.

Só para ficar claro, isso acontece depois que meu plugin faz sua postagem. Você pode precisar encontrar um desenvolvedor para corrigir o SEC para você.

Este ano vou montar um site cheio de recursos para ajudar as pessoas a usar o poder do meu plugin. Vou descobrir como escrever CSS para manipular seus elementos SVG.

Enquanto isso, se você quiser que eu dê uma olhada, abra um novo tópico e compartilhe seu URL e informações sobre o problema. Vou levá-lo rapidamente.

Isto foi útil?

0 / 0

Deixe uma resposta 0

O seu endereço de email não será publicado. Campos obrigatórios são marcados *