CODEWITHSUNDEEP
javascriptjquerysvg
mnowotka
mnowotka

Reputation: 17218

How can I change the color of my svg drawing?

I have a chemical compound loaded as svg:

$('#svg-container').load(
'https://www.ebi.ac.uk/chembl/api/data/image/CHEMBL57.svg', null, null
});

It has original colors, which I need to change to orange (all of it so letters, bonds and atoms).

I've tried this:

http://jsfiddle.net/L2rd1e1g/4/

But it doesn't work. I believe this is something very easy, any help?

Upvotes: 0

Views: 106

Answers (3)

mondjunge
mondjunge

Reputation: 1239

As jbutler483 writes the svg uses inline styles, a style attribut on the elements, what are most powerful in css cascades and can only be overwritten with !important via css. However this is as heavy as a js solution.

Here is a fiddle with some (commented) js magic to change the color of the whole thing, however this also makes a border aropund the image. I am not sure why I cannot circumvent this behaviour.

Bonus in this fiddle is, that I included the source HTML of your svg, so you can take a look at it for yourself. (hint: [strg]+[shift]+i brings up the source inspector in Firefox, very useful to examine sources)

http://jsfiddle.net/usg12dg7/3/ 

$('#svg-container').load('https://www.ebi.ac.uk/chembl/api/data/image/CHEMBL57.svg', null,
    function(){
       var can = $('svg');
       console.log(can.children());
       can.find('g').css('fill','red');
       can.find('path').css('stroke','red');
});

Upvotes: 0

Henrik
Henrik

Reputation: 2229

ok here is some stuff you would want to know..

svg is just xml..

you can parse it, and play with it, just like any other xml.

svg colors in diagrams would often be defined through styling classes, that could be modified by updating the css, or style header.

your example is not created like that, but instead each graphic element is given a style property.

to select the svg node properly, do this

var svg = $('#svg-container>svg')

--

next in javascript jquery the .children() method only travels down one level, you want to go further than that..

svg.find('*').each(function() {
    //this refers to the node..
}

and then update the style, where appropriate

in example: http://jsfiddle.net/L2rd1e1g/9/

$('#svg-container').load('https://www.ebi.ac.uk/chembl/api/data/image/CHEMBL57.svg', null, function(svg){
    var svg = $('#svg-container>svg')
    svg.find('*').each(function() {
         if(this.style.fill.indexOf("rgb("))
             this.style.fill = "rgb(0,255,0)" 
    });
});

changes the color of all nodes that already had an rgb value assigned to the fill..

here is a fully functional fiddle

http://jsfiddle.net/L2rd1e1g/10/

Upvotes: 1

jbutler483
jbutler483

Reputation: 24529

Since your svg is using inline styling, you may have to use the !important tag. Here's a quick example of coloring all of the svg with a tomato color:

$('#svg-container').load('https://www.ebi.ac.uk/chembl/api/data/image/CHEMBL57.svg', null);
svg path {
  stroke: tomato !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="svg-container"></div>

Explanation

What I did here in order to complete this was to examine the svg file you were loading. This meant I needed to view the source of the svg, and locate what was giving the svg a color.

I noticed that the svg was using inline styling, of which needed to be overwritten in your css.

Due to the svg containing the inline styling, it meant that you need to be extra specific to overwrite this. (Hence my current implementation). However, i will further look into the svg and see if I can remove this 'nasty' property.

Upvotes: 1

Related Questions