CSS SVG file does not perform Javascript function

Question

I’m using an SVG as background-image, via css:

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

Then inside the SVG arch I call a function in the onload because I need to pass RGB color parameters to SVG and change the Fill of polygon depending on what the customer has chosen:

<?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>

The problem is that onload="setParams" in the SVG (which is as backgounr-image) is not interpreted at the time I replay the page with the CSS. That is, my "index" links CSS but it in turn does not go until SVG interprets JS.

If I access the SVG directly in the url ai yes it interprets the JS and executes the function, but through the index that calls the css does not reach the javascript in svg.

Answer 1

Here are two ideas:

Using mask-image

If you want to use the silhouette of this SVG you can use Mask-image and change the container background-color of that image. That’s very simple and the code is just this:

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/

Using url('data:...

You can pass xml directly as data property. You can do this like this:

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 + "')"
}

and then apply to the element:

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

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

Answer 2

I found a way to pass the contents of the SVG file directly into the CSS, so you can change the color without relying on JS within the SVG. I already pass the direct color in the property 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>');