4

Estou a usar um SVG como background-image, via css:

#element {
    background-image: url('triangle.svg');
}

Então dentro do arquvio SVG eu chamo uma função no onload pois preciso passar parametros de cores RGB para o SVG e mudar o fill do polygon consoante o que o cliente tiver escolhido:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="114px" height="66px" viewBox="0 0 114 66" xml:space="preserve" onload="setParams()">
    <script type="text/javascript">
        <![CDATA[
            function setParams() {
                alert('funcao!');
            }
        ]]>
    </script>
    <polygon id="polygon" points="114,0 0,66 114,66"/>
</svg>

O problema é que esse onload="setParams" no SVG (que está como backgounr-image) não é interpretado na hora que renderizo a pagina que esta com o CSS. Ou seja, o meu "index" linka o CSS mas ele por sua vez não vai ate o SVG interpretar o JS.

Se eu acessar o SVG diretamente na url ai sim ele interpreta o JS e executa a função, mas através do index que chama o css não chega ate o javascript no svg.

1
  • Por favor evitem longas discussões nos comentários; a conversa de vocês foi movida para o chat
    – Maniero
    Commented 1/03/2017 às 20:01

2 Respostas 2

3

Aqui vão duas ideias:

Usando mask-image

Se o que queres é usar a silhueta desse SVG podes usar o mask-image e mudar o background-color do container dessa imagem. Isso fica bem simples e o código é só este:

background-repeat: none;
background-color: #ccf; /* esta é a propriedade que vais querer mudar */
mask-image: url('triangle.svg');
-webkit-mask-image: url('triangle.svg');

jsFiddle: http://jsfiddle.net/fnvyx6ev/

Usando url('data:...

Podes passar xml diretamente como data para a propriedade do elemento. Podes fazer isso assim:

var generateSVG = function (cor) {
    var el = '<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="114px" height="66px" viewBox="0 0 114 66" xml:space="preserve">' +    
                 '<polygon id="polygon" fill="' + cor + '" points="114,0 0,66 114,66"/>'+
             '</svg>';
    return "url('data:image/svg+xml;utf8," + el + "')"
}

e depois aplicar ao elemento:

var svg = generateSVG(corPretendida);
element.style.backgroundImage = svg;

jsFiddle: http://jsfiddle.net/nnvey1th/

1

Achei uma forma de passar o conteúdo do arquivo SVG diretamente no CSS, assim podendo alterar a cor sem depender de JS dentro do SVG. Já passo a cor direto na propriedade fill.

background-image: url('data:image/svg+xml;utf8, <!-- aqui vai o conteúdo XML do SVG -->');

background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="114px" height="66px" viewBox="0 0 114 66" xml:space="preserve"><polygon fill="rgb(128,128,128)" points="114,0 0,66 114,66"/></svg>');
1
  • 2
    A tua resposta tem o mesmo conteúdo da resposta que dei, usando url(data:. Talvez fosse melhor deixar isso como comentário na minha resposta ou explicando porque esta resposta é diferente daquela que já havia. De qualquer maneira marca uma delas como aceite para a pergunta ficar resolvida. Até breve!
    – Sergio
    Commented 7/04/2015 às 22:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .