How to target attributes of a SVG path using JavaScript?

Question

I am trying to replace the fill attribute of a SVG path using JavaScript without success. How can I do that? Here are a few of the things I've tried to far.

SVG

<svg width="40px" height="40px" viewBox="82 40 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs></defs>
  <path d="M102,40 L83.8181818,40 L82,40 L82,41.8181818 L82,78.1818182 L82,80 L83.8181818,80 L102,80 C113.027879,80 122,71.0278788 122,60 C122,48.9721212 113.027879,40 102,40" id="logo" stroke="none" fill='#FFFFF' fill-rule="evenodd"></path>
</svg>

JS

$(document).ready(function() {
  var textColor = '#FFFC1B';

  // $('#logo').style.fill(textColor);
  // $("#logo", $svg).attr('style', "fill:"+textColor); })
  $('#logo').setAttribute(fill, textColor);
});

Answer 1

All you seem to be missing is the ' single quotes ' around the fill attr. 'fill'

Please give this a try:

 $(document).ready(function() { var textColor = '#FFFC1B'; $('#logo').attr('fill', textColor); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <svg width="40px" height="40px" viewBox="82 40 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs></defs> <path d="M102,40 L83.8181818,40 L82,40 L82,41.8181818 L82,78.1818182 L82,80 L83.8181818,80 L102,80 C113.027879,80 122,71.0278788 122,60 C122,48.9721212 113.027879,40 102,40" id="logo" stroke="none" fill='#FFFFF' fill-rule="evenodd"></path> </svg>