Changing color of an inline SVG

Question

I downloaded a world map SVG to mess around with SVG manipulation with Javascript. My goal is to change the color of the United States when I click on it, and then when I click on it again it goes back to the original color. Here is the part of the SVG that defines the United States:

<path
inkscape:connector-curvature="0"
id="US"
data-name="United States"
data-id="US"
d="m 116.7,450.7 2,-0.9 2.5,-1.4 0.2,-0.4 -0.9,-2.2 -0.7,-0.8 
-7.1,-0.5 -6.2,-1.6 -4.8,0.5 -4.9,-0.9 2,-1.2 -6.3,-0.3 -3.3,1 
0.5,-2.4 z"
style="fill:#f2f2f2;fill-rule:evenodd" />

(I deleted a lot of the coordinates because they were making the code so long)

Here is the CSS:

.united_states {
 fill: blue;
}

Here is the javascript, using JQuery:

$(function(){
  $('#US').click(function(event){
    console.log("You just clicked on the United States!!");

 $('#US').toggle();
 $(this).toggleClass('.united_states');

  });
})();

And finally, here is a JsFiddle of it: link

Changing the 'fill' attribute of the tag to blue worked, but I want to do it on click, and toggle it (blue and then back to normal).

Thank you for your help.

`$obj.toggle()` will toggle its `display` CSSProperty between `block` and `none`. Probably not what you want. Now, you do have a `fill` rule set in the element's `style` attribute. This rule will have precedence over the `.united_states` class selector, and hence, your rule won't get updated. You could arrange it in many ways, like not setting `style` attributes but `fill` attribute directly, or setting it all in a global stylesheet, or (the less good) by adding an `!important` keyword to rule class' rule... — Kaiido, Jul 12 '18 at 01:43
Possible duplicate of [img src SVG changing the fill color](https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-fill-color) — Vikasdeep Singh, Jul 12 '18 at 01:47

caiovisk · Accepted Answer · 2018-07-12T02:37:41.117

1

Replace jQuery toggleClass. Instead you can use classlist property and then toggle it

See below:

(function($){
  $('#US').click(function(event){
    console.log("You just clicked on the United States!!");

  $(this).prop("classList").toggle("united_states");
  });
})(jQuery);

CSS:

.united_states {
 fill: blue !important;
}

https://jsfiddle.net/L0r5e2fg/13/

edited Jul 12 '18 at 02:37

answered Jul 12 '18 at 01:54

caiovisk

3,667
1
12
18

Paul LeBeau · Answer 2 · 2018-07-13T08:52:35.890

This question doesn't really need another answer, but I am doing so because the changes you need to make ought to be explained, so you know why they were needed:

First remove $('#US').toggle();. It was causing that element to be hidden. You don't want that.
Remove the dot/period from your class name in toggleClass(). It is not required here:
```
$(this).toggleClass('united_states');
```
However this still doesn't make the toggleClass() work. This is because the map file already has a fill colour defined using a style="" attribute. style attributes have a higher precedence than CSS rules, so your .united_states {...} rule is not doing anything.

To resolve this, you need to tell the browser that your CSS rule should override the style attribute. You can do this by adding !important to the CSS property:
```
.united_states {
  fill: blue !important;
}
```

Working fiddle

Yeah it was stupid to have the $("#US').toggle(); line. Thank you for the help and I really appreciate the explanation! — Logan Phillips, Jul 13 '18 at 01:23

score 0 · Answer 3 · answered Jul 12 '18 at 01:47

0

Change your code to this

JS

$(function(){
  $('#US').click(function(event){
    $(this).toggleClass('united_states');
  });
})();

CSS

.united_states {
 fill: blue !important;
}

answered Jul 12 '18 at 01:47

Jordan Quartermain

652
3
12

Changing color of an inline SVG

3 Answers3