CODEWITHSUNDEEP
javascriptjquerycsssvg
Pratik Agarwal
Pratik Agarwal

Reputation: 7

Changing color of an SVG path using JavaScript (JS Color library)

I'm trying to modify an SVG image through the JS Color library. When I pass the ID of the SVG image to my JavaScript function, the function appropriately changes the background of the "entire" SVG background as a whole. But, when I pass the SVG path ID to that function, it doesn't do anything. See code below for reference:

<html>
<head>
<body>

<script src="jscolor.js"></script>

<p>'onchange' fires after the mouse button is released

<p>Rectangle color:
<input class="jscolor" onchange="update(this.jscolor)" value="cc66ff">

<p id="rect" style="border:1px solid gray; width:161px; height:100px;">
<svg id="svg3436" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="297mm" width="210mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 744.09448819 1052.3622047">
 <metadata id="metadata3441">
  <rdf:RDF>
   <cc:Work rdf:about="">
    <dc:format>image/svg+xml</dc:format>
    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
    <dc:title/>
   </cc:Work>
  </rdf:RDF>
 </metadata>
 <g id="layer1">
  <path id="rect2985" style="fill:#800000" d="m451.87 620.2c13.102 0 23.641-9.5583 23.641-21.441v-246.33c0-11.883-10.539-21.441-23.641-21.441h-198.84c-13.102 0-23.641 9.5583-23.641 21.441v246.33c0 11.883 10.539 21.441 23.641 21.441h198.84zm-12.243-19.304h-172.71c-11.381 0-20.542-8.3084-20.542-18.63v-213.95c0-10.322 9.1608-18.63 20.542-18.63h172.71c11.381 0 20.542 8.3084 20.542 18.63v213.95c0 10.322-9.1608 18.63-20.542 18.63z"/>
  <path id="rect3758" style="fill:#000000" d="m424.31 822.02h-143.93l-20.297-197.66h188.21z"/>
  <path id="path3761" style="fill:#000000" d="m424.31 127.09h-143.93l-20.297 197.66h188.21z"/>
  <rect id="rect3763" style="fill:#000000" transform="scale(-1)" ry="9.3628" height="30.299" width="17.83" y="-543.22" x="-237.31"/>
  <rect id="rect3765" style="fill:#000000" transform="scale(-1)" ry="9.3628" height="30.299" width="17.83" y="-435.02" x="-237.31"/>
  <g id="layer1-7" transform="matrix(0 1 -1 0 1646.9 -154.84)">
   <g id="g4387" transform="matrix(0 1.2805 -1.1172 0 1339.7 702.88)">
    <rect id="rect3769" style="fill:#000000" ry="1.6079" height="73.966" width="4.8882" y="621.88" x="458.59"/>
    <rect id="rect3771" style="fill:#000000" transform="matrix(-.69129 -.72257 .72257 -.69129 0 0)" ry="1.7366" height="79.883" width="4.8882" y="-120.82" x="-779.57"/>
    <circle id="path3773" style="fill:#000000" transform="translate(413.71 283.16)" cy="351.83" cx="47.071" r="6.2762"/>
   </g>
  </g>
 </g>
</svg>
<script>

function update(jscolor) {

    document.getElementById('path3761').style.backgroundColor = '#' + jscolor
}
</script>


<p style="margin-top:3em;">Check out <a href="http://jscolor.com/examples/">more examples at jscolor.com</a>!</p>
</body>
</head>
</html>

I want to update the paths inside my SVG and change the color based on the color the user selects from a palette. It does recognize the color and changes it if I provide the SVG id as I said; but fails to do so for the path ID. I guess I need to "tell" the JS function that there is a path. How should I proceed?

Upvotes: 0

Views: 797

Answers (1)

stewo
stewo

Reputation: 454

Hej!

It must be style.fill instead of style.backGroundcolor for paths.

this.jscolor is probably meant to use that library. Anyway, to get this example to work, use update(value). Value refers to the value of the input element. Then of course you have to fit it to your needs and make it work with this library.

<body>

<input class="jscolor" onclick="update(value)" value="cc66ff">

<svg id="svg3436" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="297mm" width="210mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 744.09448819 1052.3622047">
 <g id="layer1">
  <path id="rect2985" style="fill:#800000" d="m451.87 620.2c13.102 0 23.641-9.5583 23.641-21.441v-246.33c0-11.883-10.539-21.441-23.641-21.441h-198.84c-13.102 0-23.641 9.5583-23.641 21.441v246.33c0 11.883 10.539 21.441 23.641 21.441h198.84zm-12.243-19.304h-172.71c-11.381 0-20.542-8.3084-20.542-18.63v-213.95c0-10.322 9.1608-18.63 20.542-18.63h172.71c11.381 0 20.542 8.3084 20.542 18.63v213.95c0 10.322-9.1608 18.63-20.542 18.63z"/>
  <path id="rect3758" style="fill:#000000" d="m424.31 822.02h-143.93l-20.297-197.66h188.21z"/>
  <path id="path3761" style="fill:#000000" d="m424.31 127.09h-143.93l-20.297 197.66h188.21z"/>
  <rect id="rect3763" style="fill:#000000" transform="scale(-1)" ry="9.3628" height="30.299" width="17.83" y="-543.22" x="-237.31"/>
  <rect id="rect3765" style="fill:#000000" transform="scale(-1)" ry="9.3628" height="30.299" width="17.83" y="-435.02" x="-237.31"/>
  <g id="layer1-7" transform="matrix(0 1 -1 0 1646.9 -154.84)">
   <g id="g4387" transform="matrix(0 1.2805 -1.1172 0 1339.7 702.88)">
    <rect id="rect3769" style="fill:#000000" ry="1.6079" height="73.966" width="4.8882" y="621.88" x="458.59"/>
    <rect id="rect3771" style="fill:#000000" transform="matrix(-.69129 -.72257 .72257 -.69129 0 0)" ry="1.7366" height="79.883" width="4.8882" y="-120.82" x="-779.57"/>
    <circle id="path3773" style="fill:#000000" transform="translate(413.71 283.16)" cy="351.83" cx="47.071" r="6.2762"/>
   </g>
  </g>
 </g>
</svg>
<script>

function update(jscolor) {

    document.getElementById('path3761').style.fill = '#' + jscolor
}
</script>
</body>

Upvotes: 1

Related Questions