Changing SVG image color with javascript

javascript svg
Potney Switters picture Potney Switters · Mar 26, 2012 · Viewed 207k times · Source

I am trying to alter svg image colors with javascript. Is this possible? Can I load it as an object and then somehow have access to the color/image-data.

Every respone or tip is highly appreciated!

Answer

peter picture peter · Mar 26, 2012

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>

Related questions

Convert SVG to image (JPEG, PNG, etc.) in the browser

I want to convert SVG into bitmap images (like JPEG, PNG, etc.) through JavaScript.

Read More
How to use z-index in svg elements?

I'm using the svg circles in my project like this, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120"> <g> <g id="one"> <circle fill="green" cx="100" cy="105" r="20" /> </g> <…

Read More
How can I remove or replace SVG content?

I have a piece of JavaScript code which creates (using D3.js) an svg element which contains a chart. I want to update the chart based on new data coming from a web service using AJAX, the problem is that …

Read More