title: Change fill of inline SVG path on click
body: <p>I'm new to html etc and I'm trying to make a SVG map where it is possible to change the fill color of a country (a <code>path</code>) by clicking on it.</p>
  
  <p>So far I managed to change the fill when hovering over a path, <strong>but I can't get it to work that the color is toggled on click.</strong> So, the goal is that the user can hover over a path and is highlighted. When he clicks, the fill is changed to some value ("marked"), and again changed back to the original fill color after a second click. <strong>How can I implement the toggling of the fill color when a path is clicked?</strong></p>
  
  <p>Here is part of the html file, only the other svg paths are excluded:</p>
  
  <pre><code>&lt;link rel="stylesheet" class="st0"type="text/css" class="st0"href="main.css" class="st0"/&gt;
  
  &lt;?xml version="1.0" class="st0"encoding="utf-8"?&gt;
  &lt;!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --&gt;
  &lt;svg version="1.1"
       id="world-map" class="st0"inkscape:version="0.91 r13725" class="st0"sodipodi:docname="World_map_-_low_resolution.svg" class="st0"xmlns:cc="http://creativecommons.org/ns#" class="st0"xmlns:dc="http://purl.org/dc/elements/1.1/" class="st0"xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" class="st0"xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" class="st0"xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" class="st0"xmlns:svg="http://www.w3.org/2000/svg"
       xmlns="http://www.w3.org/2000/svg" class="st0"xmlns:xlink="http://www.w3.org/1999/xlink" class="st0"x="0px" class="st0"y="0px" class="st0"viewBox="0 0 950 620"
       style="enable-background:new 0 0 950 620;" class="st0"xml:space="preserve"&gt;
  
  &lt;path id="estonia" fill="#F5F5F5" d="M517.8,143.7l-5.6-0.2l-3.5,2.2l0,1.6l2.3,2.2l7.2,1.2L517.8,143.7L517.8,143.7z
  M506.8,147.6l-1.5-0.1l-0.9,0.9l0.6,1l1.5,0.1l0.8-1.2L506.8,147.6L506.8,147.6z
  M506.6,151.7l-1.5-0.1l-2.7,3.2v1.5l0.9,0.4l1.8,0.1l2.9-2.4l0.4-0.8L506.6,151.7L506.6,151.7z"/&gt;
  
  &lt;path id="sweden" fill="#F5F5F5" d="M497.7,104.6l2,1.8h3.7l2,3.9l0.5,6.7l-5,3.5v3.5l-3.5,4.8l-2,0.2l-2.8,4.6l0.2,4.4l4.8,3.5l-0.4,2l-1.8,2.8
      l-2.8,2.4l0.2,7.9l-4.2,1.5l-1.5,3.1h-2l-1.1-5.5l-4.6-7l3.8-6.3l0.3-15.6l2.6-1.4l0.6-8.9l7.4-10.6L497.7,104.6L497.7,104.6z
      M498.5,150.2l-2.1,1.7l1.1,2.4l1.9-1.8L498.5,150.2L498.5,150.2z"/&gt;
  
  &lt;/svg&gt;
  &lt;script src="main.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>This is the css file:</p>
  
  <pre><code>#world-map{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  path:hover {
    stroke: #339999 !important;
    stroke-width:2px;
    stroke-linejoin: round;
    fill: #002868 !important;
    cursor: pointer;
  }
  </code></pre>
  
  <p>And as main.js I so far tried lots of things, but none of them work. I think that it could be something along the lines of this, but I'm not sure:</p>
  
  <pre><code>$('path').on("click", function(e) {
      $(this).html({ fill: "#ff0000" });
  });
  </code></pre>
  
  <p>Any help would be very appreciated!</p>