javascriptsvg

Changing SVG image color with JavaScript


I am trying to alter colors in an SVG with JavaScript. Is this possible? Can I load it as an object and then somehow have access to the color and image data?


Solution

  • Sure, here is an example (standard HTML boilerplate omitted):

    <svg id="svg1" xmlns="http://www.w3.org/2000/svg" style="width: 3.5in; height: 1in">
      <circle id="circle1" r="30" cx="34" cy="34" 
                style="fill: red; stroke: blue; stroke-width: 2"/>
      </svg>
    <button onclick="circle1.style.fill='yellow';">Click to change to yellow</button>