SVG file in CSS does not perform Javascript function

Navigation
4

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

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

Then inside the SVG file I call a function in onload because I need to pass RGB color parameters to SVG and change the fill of polygon depending on what the client chooses: / p> 

<?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 this onload="setParams" in SVG (which is like backgounr-image ) is not interpreted when I render the page that is with CSS. That is, my "index" links to CSS but it in turn will not go until SVG interprets the JS.

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

    
asked by anonymous 02.04.2015 / 15:12

2 answers

3

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 background-color of the container of that image. This is 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: link

Using url('data:...

You can pass xml directly as data to the element property. You can do it 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: link

    
02.04.2015 / 21:51
1

I found a way to pass the contents of the SVG file directly into the CSS, so I can change the color without depending on JS within SVG. I already pass the color right into the fill property. 

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>');
    
06.04.2015 / 14:50
How to pass the value of the EditText from a Fragment to the TextView of another Fragment? Data manipulation with inline dates for column