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.