Mudar a cor do svg
quero usar esta técnica http://css-tricks.com/svg-fallbacks / e mudar a cor do svg, mas até agora não fui capaz de o fazer. Coloquei isto no css, mas a minha imagem é sempre Negra, aconteça o que acontecer. O meu código:
<svg>
<image class="change-my-color" xlink:href="https://dl.dropboxusercontent.com/u/13823768/tumblr/iconmonstr-time-3-icon.svg" width="96" height="96" src="ppngfallback.png" />
</svg>
e o css
.change-my-color {
fill: green;
}
em jsfiddle: http://jsfiddle.net/Kk93M/
8 answers
Se quiser mudar a sua imagem SVG, tem de a carregar com <object>
, <iframe>
ou utilizar <svg>
em linha.
Se quiser usar as técnicas na página, precisa da biblioteca Modernizr, onde poderá verificar o suporte SVG e mostrar condicionalmente ou não uma imagem de recurso. Você pode então inline seu SVG e aplicar os estilos de que precisas.
Ver http://jsfiddle.net/helderdarocha/6uRgS/
Pode alinhar o seu SVG, marcar a sua imagem de recurso com um nome de classe(my-svg-alternate
):
<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" .../>
</svg>
<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />
E em CSS use a classe no-svg
de Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ) para verificar o suporte SVG. Se não existir suporte SVG, o bloco SVG será ignorado e a imagem será exibida, caso contrário a imagem será removida da árvore DOM (display: none
):
.my-svg-alternate {
display: none;
}
.no-svg .my-svg-alternate {
display: block;
width: 100px;
height: 100px;
background-image: url(image.png);
}
Então você pode mudar a cor do seu elemento em linha:
#time-3-icon {
fill: green;
}
Para mudar a cor de qualquer SVG, poderá alterar directamente o código svg por abrir o ficheiro svg em qualquer editor de texto . O código pode parecer com o código abaixo
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<g>
<path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
C181.113,454.921,171.371,464.663,161.629,474.404z"/>
/*Some more code goes on*/
</g>
</svg>
Pode observar que existem algumas marcas XML como path,circle, polygon etc . Aí poderá adicionar a sua própria cor com a ajuda do atributo style . Veja o exemplo abaixo
<path style="fill:#AB7C94;" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
C181.113,454.921,171.371,464.663,161.629,474.404z"/>
Adicione o atributo style a todas as marcas para que possa obter o seu SVG da cor necessária
Adicionou uma página de ensaio à SVG de cores através da configuração do filtro:
E. G.
filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)
Enviar A & cor do seu SVG-Jsfiddle
Tirei a ideia de: https://blog.union.io/code/2017/08/10/img-svg-fill/
A maneira mais fácil seria criar um tipo de letra do SVG usando um serviço como https://icomoon.io/app/#/select ou assim. faça upload do seu SVG, carregue em "gerar o tipo de letra", inclua ficheiros de tipos de letra e css para o seu lado e use-o e classifique-o como qualquer outro texto. Eu sempre usá-lo assim porque torna o estilo muito mais fácil.
Editar: tal como mencionado no artigo , comentado por @CodeMouse92 tipos de letra dos ícones confundem os leitores do ecrã (e são possivelmente maus para o SEO). Entao prefiro ficar-me pelos SVGs.
Pode mudar a coloração SVG com css se usar alguns truques. Escrevi um pequeno guião para isso.
- passa por uma lista de elementos que têm uma imagem svg
- carregue o ficheiro svg como xml
- obter apenas a parte svg
- mudar a cor da localização
- substituir o src com o svg modificado como imagem incorporada
$('img.svg-changeable').each(function () {
var $e = $(this);
var imgURL = $e.prop('src');
$.get(imgURL, function (data) {
// Get the SVG tag, ignore the rest
var $svg = $(data).find('svg');
// change the color
$svg.find('path').attr('fill', '#000');
$e.prop('src', "data:image/svg+xml;base64," + window.btoa($svg.prop('outerHTML')));
});
});
O código acima pode não estar a funcionar correctamente, implementei isto para elementos com uma imagem de fundo svg que funciona quase semelhante a isto. Mas de qualquer forma você tem que modificar este script para se encaixar no seu caso. espero que tenha ajudado.
Apenas SVG com informação do canal horário. não podes fazer isso à imagem.. como o caminho você pode mudar strock e preencher informações e você está feito. Como ilustrador
Assim: através do CSS, poderá sobrepor o valor do local fill
path { fill: orange; }
Mas se quiser uma forma mais flexível, como deseja alterá-la com um texto quando está a ter algum efeito de pairar.. utilizar
path { fill: currentcolor; }
body {
background: #ddd;
text-align: center;
padding-top: 2em;
}
.parent {
width: 320px;
height: 50px;
display: block;
transition: all 0.3s;
cursor: pointer;
padding: 12px;
box-sizing: border-box;
}
/*** desired colors for children ***/
.parent{
color: #000;
background: #def;
}
.parent:hover{
color: #fff;
background: #85c1fc;
}
.parent span{
font-size: 18px;
margin-right: 8px;
font-weight: bold;
font-family: 'Helvetica';
line-height: 26px;
vertical-align: top;
}
.parent svg{
max-height: 26px;
width: auto;
display: inline;
}
/**** magic trick *****/
.parent svg path{
fill: currentcolor;
}
<div class='parent'>
<span>TEXT WITH SVG</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32">
<path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path>
</svg>
</div>
Para simplesmente mudar a cor do svg:
Vá para o ficheiro svg e por baixo dos estilos, mencione a cor no preenchimento.
<style>.cls-1{fill:#FFFFFF;}</style>
Se quiser fazer isto a um svg incorporado que seja, por exemplo, uma imagem de fundo no seu css:
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(31,159,215,1)' viewBox='...'/%3E%3C/svg%3E");
Claro, substitui o ... com o seu código de imagem incorporado