CODEWITHSUNDEEP
javascripthtmlsvg
Fredy
Fredy

Reputation: 2063

Modifying svg files using javascript

I have an svg file called "heartn.svg" with the following code:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<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"
     viewBox="0 0 127.3 104.4" style="enable-background:new 0 0 127.3 104.4;" xml:space="preserve" >
<style type="text/css" >
    .st0{fill:#FFFFFF;}
</style>
<g id="stuff"> 
    <path class="st0" id= "int" d="M21,72.3c5,5,8.9,8.1,16.8,14.3c11.3,8.9,12.7,8.6,16.7,12.2c2,1.8,4.5,2.9,6.7,4.4c0.8,0.6,1.8,1.2,3,1.1
        c1.1-0.1,1.7-0.8,3.5-2.2c0.9-0.7,0.6-0.4,3.1-2c5.2-3.4,10.6-7.3,10.6-7.3c5.9-4.3,10.3-7.8,11.7-8.9c5.4-4.4,8.7-7,12.9-11.2
        c1.1-1.1,4.8-4.8,9.2-10.3c0.4-0.4,0.7-0.9,1-1.3c0,0,0,0,0,0H11.2C13.6,64.3,16.8,68.1,21,72.3z"/>
    <path class="st0" d="M125.1,47.7c1.8-5,2-9.5,2.1-11.7c0.2-4.1-0.2-7.4-0.5-9.2c-0.3-2.1-0.8-4.8-2.1-8c-0.7-1.8-2.7-6.1-7-10.3
        c-1.6-1.6-5.3-5.1-11.2-7c-4.7-1.5-8.7-1.4-11-1.2c-4.3,0.2-7.5,1.3-9.4,1.9c-1,0.3-5.5,1.9-10.6,5.4c-1.5,1.1-4,2.7-6.5,5.4
        c-1.4,1.5-2,2.2-2.7,3.4c-1.2,2-1.6,3.7-2.3,3.6c-0.5,0-0.7-0.7-1.1-1.5c-0.1-0.2-1.1-1.5-3.1-4.1C56.1,9.5,51,6.1,51,6.1
        c-1.7-1.2-6.3-4.1-13-5.3c-3-0.6-9.6-1.7-17.3,1.1c-2.3,0.8-7.6,3-12.2,8.3c-5.7,6.3-7,13.2-7.7,17.1c-0.5,2.6-1.3,7.3-0.3,13.1
        c0.3,1.4,0.9,4.5,3.6,9.7c0,0,0,0,0,0h120.1C124.5,49.3,124.9,48.5,125.1,47.7z"/>
</g>
</svg>

I want to modify:

.st0{fill:#FFFFFF;}

using javascript.

In my HTML file I have the file being displayed by using the following code:

<img id="heart" src="images/heartn.svg" alt="heart" />

so far the javascript in my HTML file looks like this:

if (jsonObj.heart>16) {
          var heart_img=document.getElementById("heart");

        };

I really don't know what to do, I've tried adding id's to the svg file but i can't really find a way to change the color.

Any help will be appreciated. Thanks!

********EDIT*******

if (jsonObj.heart>16) {
          var heart_img=document.getElementById("heart").contentDocument;
          heart_img.getElementByClassName("st0").setAttribute("fill", "FF0000");

        };

I tried this and it doesn't work.

Upvotes: 1

Views: 941

Answers (3)

PathNotFound
PathNotFound

Reputation: 1

hi here a solution who works for me :

document.querySelector("#test").contentDocument.querySelector("path").setAttribute("fill", "#FF000");

with #test your object id in html

Upvotes: -1

craigo
craigo

Reputation: 151

You will be able to manipulate the svg using javascript if you add the element to your html instead of linking to it in an image tag.

ie.

<svg id="heart"...> ... </svg>

It should not be inside an iframe. One option would be to add a class to the path using javascript. Therefore you could, for example add the class 'active' to .str0.

Your css would look like this:

.str0 {
 fill : <some color>
}
.str0.active {
 fill:#00ff00;
}

You can add the class by either jQuery `$('.str0').addClass('active'); of

el = document.getElementsByClassName("str0");
el[0].className = el[0].className += " active";

This will work back as far as IE9.

Also worth checking out JQuery SVGdom

EDIT

var el = document.getElementsByClassName('st0'); 
el[0].style.fill = "#FF0000";

Edited to include the simpler way of changing the colour as mentioned in the comments below.

Upvotes: 0

Robert Longson
Robert Longson

Reputation: 124269

Starting from

<iframe id="heart" src="images/heartn.svg" frameborder="0" onload="modify()"></iframe>

We need a function (in the html file) that looks something like this...

function modify() {
    // get the remote document
    var doc = document.getElementById("heart").contentDocument;
    // modify the style element's style
    doc.styleSheets[0].cssRules[0].style.fill = "#FF0000";
}

You've one stylesheet in the document which is why it's styleSheets[0]

<style type="text/css" >
    .st0{fill:#FFFFFF;}
</style>

This stylesheet has one rule (.st0), hence cssRules[0] which we modify. Modifying the rule affects everything that points to it.

You can still modify the style rule if you make put the svg inline, you'd just use the html global document rather than the iframe's document in that case.

I can't really demo the <iframe> in a stack snippet (because I'd need another file) and stack snippets insert a stylesheet themselves which means I need to use styleSheets[1] below. This works in Firefox and Safari:

    <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"
         viewBox="0 0 127.3 104.4" style="enable-background:new 0 0 127.3 104.4;" xml:space="preserve" >
    <style type="text/css" >
        .st0{fill:#FFFFFF;}
    </style>
    <g id="stuff">
        <path class="st0" id= "int" d="M21,72.3c5,5,8.9,8.1,16.8,14.3c11.3,8.9,12.7,8.6,16.7,12.2c2,1.8,4.5,2.9,6.7,4.4c0.8,0.6,1.8,1.2,3,1.1
            c1.1-0.1,1.7-0.8,3.5-2.2c0.9-0.7,0.6-0.4,3.1-2c5.2-3.4,10.6-7.3,10.6-7.3c5.9-4.3,10.3-7.8,11.7-8.9c5.4-4.4,8.7-7,12.9-11.2
            c1.1-1.1,4.8-4.8,9.2-10.3c0.4-0.4,0.7-0.9,1-1.3c0,0,0,0,0,0H11.2C13.6,64.3,16.8,68.1,21,72.3z"/>
        <path class="st0" d="M125.1,47.7c1.8-5,2-9.5,2.1-11.7c0.2-4.1-0.2-7.4-0.5-9.2c-0.3-2.1-0.8-4.8-2.1-8c-0.7-1.8-2.7-6.1-7-10.3
            c-1.6-1.6-5.3-5.1-11.2-7c-4.7-1.5-8.7-1.4-11-1.2c-4.3,0.2-7.5,1.3-9.4,1.9c-1,0.3-5.5,1.9-10.6,5.4c-1.5,1.1-4,2.7-6.5,5.4
            c-1.4,1.5-2,2.2-2.7,3.4c-1.2,2-1.6,3.7-2.3,3.6c-0.5,0-0.7-0.7-1.1-1.5c-0.1-0.2-1.1-1.5-3.1-4.1C56.1,9.5,51,6.1,51,6.1
            c-1.7-1.2-6.3-4.1-13-5.3c-3-0.6-9.6-1.7-17.3,1.1c-2.3,0.8-7.6,3-12.2,8.3c-5.7,6.3-7,13.2-7.7,17.1c-0.5,2.6-1.3,7.3-0.3,13.1
            c0.3,1.4,0.9,4.5,3.6,9.7c0,0,0,0,0,0h120.1C124.5,49.3,124.9,48.5,125.1,47.7z"/>
    </g>
    <script>
        document.styleSheets[1].cssRules[0].style.fill = "#FF0000";
    </script>
    </svg>

Upvotes: 1

Related Questions