We Keep Coding

Inline css style fill all paths of an SVG image with 2 layers with javascript

I have this code to render SVG image with 2 layers:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 175.94 315.65" style="enable-background:new 0 0 175.94 315.65;" xml:space="preserve">
<g id="Layer_1">
<path class="st0" d="M18.87,132.57c5.5-2.4,10.1-6.46,15.56-8.94c5.93,1.66,11.11,5.28,17.02,7.01c2.66,0.73,5.6-1.75,5.27-4.51
c-0.89-6.06-2.93-11.91-3.89-17.97c3.87-4.32,8.15-8.29,11.65-12.92c2.13-2.28,0.96-6.65-2.25-7.12
c-5.91-1.21-12.12-0.48-17.95-1.96c-3.5-4.67-5.59-10.22-8.91-15c-1.61-2.73-6.41-2.77-7.73,0.25c-2.78,5.11-4.1,10.9-7.05,15.92
c-5.59,2.4-11.92,2.4-17.68,4.34c-2.4,0.74-3.66,3.97-2.44,6.15c3.86,5.26,10.4,8.04,14,13.44c-0.05,6.01-1.73,11.89-1.57,17.9
C13.08,132.03,16.35,133.61,18.87,132.57z M7.97,96.55c5.1-1.26,10.39-1.74,15.38-3.44c1.78-0.5,2.43-2.4,3.2-3.88
c1.77-4.04,3.31-8.18,5.21-12.16c2.46,3.85,4.56,7.91,6.92,11.83c0.92,1.41,1.95,3.14,3.85,3.24c5.06,0.73,10.2,0.83,15.28,1.47
c-3.21,4.07-7,7.64-10.26,11.67c-1.36,1.43-0.77,3.5-0.47,5.21c0.97,4.39,2.16,8.73,3.09,13.14c-4.08-1.6-8.02-3.51-12-5.3
c-1.86-0.84-4.12-1.53-6.03-0.46c-4.41,2.33-8.47,5.26-12.92,7.5c0.34-5.1,1.15-10.16,1.45-15.26c0.29-2-1.44-3.33-2.67-4.59
C14.69,102.49,11.04,99.84,7.97,96.55z"/>
<path class="st0" d="M91.31,36.4c-0.28,3.26-0.71,6.5-0.99,9.76c3.01-1.2,5.73-3.46,8.98-3.83c2.91,0.96,5.53,2.62,8.37,3.79
c-0.35-3.28-0.86-6.53-1.32-9.79c2.23-2.23,4.46-4.48,6.41-6.96c-2.97-0.59-6.01-0.83-8.92-1.64c-2.22-2.39-3.3-5.57-4.94-8.35
c-1.91,2.64-3.34,5.56-4.7,8.5c-3.1,0.53-6.2,0.97-9.28,1.58C86.77,32.01,89,34.26,91.31,36.4z"/>
</g>
<g id="Layer_2">
<path class="st0" d="M131.76,6.63c-4.41-2.49-8.64-6.53-13.79-6.63c-3.51-0.07-3.26,4.66-1.31,6.69
c11.46,16.14,17.89,35.91,17.57,55.74c-0.11,31.34-16.95,62.09-43.45,78.87c-16.18,10.43-35.6,15.92-54.87,14.88
c-5.34,0.24-11.48-3.97-15.92-0.97c-1.16,0.78-1.2,3.01,0.04,4.1c2.29,2.42,5.11,4.24,7.8,6.19c-0.06,37.67-0.08,75.34,0.01,113
c0.06,4.19-2.57,7.7-4.24,11.36c-4.12,0.73-8.31,1.1-12.38,2.07c-0.09,0.36-0.29,1.08-0.38,1.44c2.63,3.25,6.28,5.59,8.65,9.05
c-0.23,4.44-1.44,8.77-1.54,13.23c4.23-1.58,8.16-3.83,12.08-6.04c4.13,2.01,8.13,4.35,12.5,5.83c-0.34-4.45-1.19-8.83-2.11-13.18
c3.1-3.45,6.57-6.55,9.5-10.15c-4.38-1.22-8.9-1.75-13.4-2.27c-1.79-3.61-4.57-7.09-4.3-11.34c0.05-36.71-0.03-73.43,0.04-110.14
c13.71,7.75,29.09,12.61,44.88,13.24c0.09,5.62,0.04,11.23,0.11,16.85c-0.08,2.38,0.32,5.05-1.26,7.07
c-3.67,5.49-5.56,11.88-8.18,17.88c-5.89,1.57-11.95,2.38-17.8,4.05c-3.11,0.8-3.82,5.35-1.48,7.39c4,4.19,9.07,7.27,12.89,11.66
c0.36,6.3-1.72,12.49-1.31,18.79c0.23,2.84,4.14,4.25,6.43,2.86c5.2-2.8,10.04-6.25,15.27-9.04c5.47,2.35,10.67,5.38,16.36,7.21
c2.26,0.79,5.06-0.8,5.49-3.14c0.25-6.63-3.46-12.78-3.39-19.34c3.36-4.62,7.94-8.22,11.32-12.83c1.92-2.2,1-6.45-2.06-7.04
c-6.02-1.29-12.24-0.91-18.32-1.84c-3.07-5.8-6.85-11.23-9.61-17.17c-0.54-7.72,0.07-15.49-0.29-23.23
c26.26-0.27,52.18-11.62,69.93-31.01c13.2-14.35,21.7-32.94,23.98-52.3C179.8,62.89,162.27,25.51,131.76,6.63z M86.98,226.42
c0.83,1.39,2.55,1.47,3.99,1.68c4.65,0.49,9.33,0.76,13.99,1.32c-2.79,3.22-5.67,6.36-8.55,9.49c-1.29,1.53-3.06,3.25-2.55,5.47
c0.78,5.06,2.33,9.96,3.26,15c-4.81-1.94-9.41-4.4-14.29-6.15c-1.76-0.9-3.45,0.31-4.96,1.1c-3.96,2.3-7.78,4.81-11.75,7.08
c0.35-5.28,1.44-10.5,1.59-15.79c0.2-1.9-1.47-3.11-2.64-4.3c-3.3-2.95-6.84-5.63-9.83-8.9c5.02-1.43,10.28-1.87,15.24-3.52
c1.74-0.51,2.35-2.39,3.09-3.85c1.74-4.07,3.37-8.2,5.28-12.2C81.77,217.25,83.92,222.12,86.98,226.42z"/>
</g>
</svg>
Now I have a span element with background color and class "check" assigned:
<span class="check" style="background-color: #4d1b18">Brown</span>
and the JS code:
<script type="text/javascript">
var svg = document.querySelector('span.check');
var layer1 = document.querySelector('#Layer_1');
var matches = layer1.querySelector('path');
matches.style.fill = svg.style.backgroundColor;
</script>
You can check the fiddle here.
As you can see, the fill is applied only to the first path of #layer_1 the second path in same ID as well (there may be even more).
How to inline the style to all path inside the Layer_1 ID ?

Try this:
var svg = document.querySelector('span.check');
var layer1 = document.querySelector('#Layer_1');
var matches = layer1.querySelectorAll('path');
matches.forEach(fillColor);
function fillColor(item, index) {
matches[index].style.fill = svg.style.backgroundColor;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 175.94 315.65" style="enable-background:new 0 0 175.94 315.65;" xml:space="preserve">
<g id="Layer_1">
<path class="st0" d="M18.87,132.57c5.5-2.4,10.1-6.46,15.56-8.94c5.93,1.66,11.11,5.28,17.02,7.01c2.66,0.73,5.6-1.75,5.27-4.51
c-0.89-6.06-2.93-11.91-3.89-17.97c3.87-4.32,8.15-8.29,11.65-12.92c2.13-2.28,0.96-6.65-2.25-7.12
c-5.91-1.21-12.12-0.48-17.95-1.96c-3.5-4.67-5.59-10.22-8.91-15c-1.61-2.73-6.41-2.77-7.73,0.25c-2.78,5.11-4.1,10.9-7.05,15.92
c-5.59,2.4-11.92,2.4-17.68,4.34c-2.4,0.74-3.66,3.97-2.44,6.15c3.86,5.26,10.4,8.04,14,13.44c-0.05,6.01-1.73,11.89-1.57,17.9
C13.08,132.03,16.35,133.61,18.87,132.57z M7.97,96.55c5.1-1.26,10.39-1.74,15.38-3.44c1.78-0.5,2.43-2.4,3.2-3.88
c1.77-4.04,3.31-8.18,5.21-12.16c2.46,3.85,4.56,7.91,6.92,11.83c0.92,1.41,1.95,3.14,3.85,3.24c5.06,0.73,10.2,0.83,15.28,1.47
c-3.21,4.07-7,7.64-10.26,11.67c-1.36,1.43-0.77,3.5-0.47,5.21c0.97,4.39,2.16,8.73,3.09,13.14c-4.08-1.6-8.02-3.51-12-5.3
c-1.86-0.84-4.12-1.53-6.03-0.46c-4.41,2.33-8.47,5.26-12.92,7.5c0.34-5.1,1.15-10.16,1.45-15.26c0.29-2-1.44-3.33-2.67-4.59
C14.69,102.49,11.04,99.84,7.97,96.55z"/>
<path class="st0" d="M91.31,36.4c-0.28,3.26-0.71,6.5-0.99,9.76c3.01-1.2,5.73-3.46,8.98-3.83c2.91,0.96,5.53,2.62,8.37,3.79
c-0.35-3.28-0.86-6.53-1.32-9.79c2.23-2.23,4.46-4.48,6.41-6.96c-2.97-0.59-6.01-0.83-8.92-1.64c-2.22-2.39-3.3-5.57-4.94-8.35
c-1.91,2.64-3.34,5.56-4.7,8.5c-3.1,0.53-6.2,0.97-9.28,1.58C86.77,32.01,89,34.26,91.31,36.4z"/>
</g>
<g id="Layer_2">
<path class="st0" d="M131.76,6.63c-4.41-2.49-8.64-6.53-13.79-6.63c-3.51-0.07-3.26,4.66-1.31,6.69
c11.46,16.14,17.89,35.91,17.57,55.74c-0.11,31.34-16.95,62.09-43.45,78.87c-16.18,10.43-35.6,15.92-54.87,14.88
c-5.34,0.24-11.48-3.97-15.92-0.97c-1.16,0.78-1.2,3.01,0.04,4.1c2.29,2.42,5.11,4.24,7.8,6.19c-0.06,37.67-0.08,75.34,0.01,113
c0.06,4.19-2.57,7.7-4.24,11.36c-4.12,0.73-8.31,1.1-12.38,2.07c-0.09,0.36-0.29,1.08-0.38,1.44c2.63,3.25,6.28,5.59,8.65,9.05
c-0.23,4.44-1.44,8.77-1.54,13.23c4.23-1.58,8.16-3.83,12.08-6.04c4.13,2.01,8.13,4.35,12.5,5.83c-0.34-4.45-1.19-8.83-2.11-13.18
c3.1-3.45,6.57-6.55,9.5-10.15c-4.38-1.22-8.9-1.75-13.4-2.27c-1.79-3.61-4.57-7.09-4.3-11.34c0.05-36.71-0.03-73.43,0.04-110.14
c13.71,7.75,29.09,12.61,44.88,13.24c0.09,5.62,0.04,11.23,0.11,16.85c-0.08,2.38,0.32,5.05-1.26,7.07
c-3.67,5.49-5.56,11.88-8.18,17.88c-5.89,1.57-11.95,2.38-17.8,4.05c-3.11,0.8-3.82,5.35-1.48,7.39c4,4.19,9.07,7.27,12.89,11.66
c0.36,6.3-1.72,12.49-1.31,18.79c0.23,2.84,4.14,4.25,6.43,2.86c5.2-2.8,10.04-6.25,15.27-9.04c5.47,2.35,10.67,5.38,16.36,7.21
c2.26,0.79,5.06-0.8,5.49-3.14c0.25-6.63-3.46-12.78-3.39-19.34c3.36-4.62,7.94-8.22,11.32-12.83c1.92-2.2,1-6.45-2.06-7.04
c-6.02-1.29-12.24-0.91-18.32-1.84c-3.07-5.8-6.85-11.23-9.61-17.17c-0.54-7.72,0.07-15.49-0.29-23.23
c26.26-0.27,52.18-11.62,69.93-31.01c13.2-14.35,21.7-32.94,23.98-52.3C179.8,62.89,162.27,25.51,131.76,6.63z M86.98,226.42
c0.83,1.39,2.55,1.47,3.99,1.68c4.65,0.49,9.33,0.76,13.99,1.32c-2.79,3.22-5.67,6.36-8.55,9.49c-1.29,1.53-3.06,3.25-2.55,5.47
c0.78,5.06,2.33,9.96,3.26,15c-4.81-1.94-9.41-4.4-14.29-6.15c-1.76-0.9-3.45,0.31-4.96,1.1c-3.96,2.3-7.78,4.81-11.75,7.08
c0.35-5.28,1.44-10.5,1.59-15.79c0.2-1.9-1.47-3.11-2.64-4.3c-3.3-2.95-6.84-5.63-9.83-8.9c5.02-1.43,10.28-1.87,15.24-3.52
c1.74-0.51,2.35-2.39,3.09-3.85c1.74-4.07,3.37-8.2,5.28-12.2C81.77,217.25,83.92,222.12,86.98,226.42z"/>
</g>
</svg>
<span class="check" style="background-color: #0f0">Green</span>

move SVG group on path trail based on percentage of whole path trail

I am trying to find a way to move an group (id="avatar") inside an SVG with jQuery based on an percentage of the whole trail of an path element (id="path" > path), inside the SVG.
So set the avatar with transform->translate to the right position dynamically for example 20% of the trail. So te input is 20, then it should be set on 20% of the trail of #path > path.
I can't find any sort of function or parsing mechanism to archive this goal.
Any suggestions?
The SVG is used in the browser as an whole SVG html5 element with all their nested SVG tags. So not loade like in an img->src.
SVG image:
SVG code:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1000 600" xml:space="preserve">
<style type="text/css">
.st5{fill:#43A592;stroke:#8C6239;stroke-width:0.5;stroke-miterlimit:10;}
.st6{fill:none;stroke:#603813;stroke-width:8;stroke-linecap:square;stroke-miterlimit:10;}
.st7{fill:none;stroke:#603813;stroke-width:8;stroke-linecap:square;stroke-miterlimit:10;stroke-dasharray:5.0414,12.0993;}
.st8{fill:#405813;}
.st9{fill:#7FBFD6;}
</style>
<g id="path">
<path class="st7" d="M253.83,291.92C438.6,278.28,338.5,457,422.2,429.99c87.72-28.31-71.17-110.68,22.64-190.57
c54.07-46.05,161.79-22.03,138.18,79.89c-13.69,59.11-53.79,87.21-30.99,132.4c0,0,20.26,23.49,61.35,18.96"/>
</g>
<g id="avatar" transform="translate(10,20)">
<g>
<g>
<circle class="st9" cx="276.22" cy="290.06" r="26.83"/>
<path class="st8" d="M276.22,317.69c-15.23,0-27.62-12.39-27.62-27.62s12.39-27.62,27.62-27.62s27.62,12.39,27.62,27.62
S291.45,317.69,276.22,317.69z M276.22,264.04c-14.35,0-26.03,11.68-26.03,26.03s11.68,26.03,26.03,26.03
s26.03-11.68,26.03-26.03S290.57,264.04,276.22,264.04z"/>
</g>
<g>
<g>
<path class="st16" d="M264.95,293.51c-0.35-0.11-0.74,0.03-0.93,0.35l-4.62,7.56c-0.35,0.58,0.02,1.33,0.7,1.39
c3.16,0.29,11.31,1.43,23.76,5.78c0.44,0.15,0.86-0.3,0.65-0.73C283.15,305.1,278.44,297.84,264.95,293.51z"/>
</g>
<g>
<path class="st16" d="M284.68,279.17c-2.01-6.83-8.8-10.85-15.17-8.97c-0.04,0.01-0.09,0.03-0.13,0.04
c-0.06-0.01-0.13-0.01-0.19-0.02c-0.07,0.05-0.13,0.09-0.19,0.14c-6.04,2.09-9.34,8.94-7.39,15.59c0,0-0.76,2.95-2.22,5.82
c0,0,6.79-0.4,8.31-7.6c0,0,0.02,0.05,0,0l9.33-2.75c0.01,0.03,0,0,0,0c8.13,6.32,13.75,1.44,13.75,1.44
S287.35,280.89,284.68,279.17z"/>
</g>
<g>
<path class="st8" d="M296.91,298.57c-0.04-0.3-0.29-0.52-0.59-0.52h-3.56c-0.33,0-0.6,0.27-0.6,0.6c0,1.34-0.33,1.94-0.6,2.2
c-0.18,0.18-0.4,0.27-0.65,0.26c-0.47-0.01-1.14-0.76-1.62-1.83c-1.25-2.77-3.05-3.78-4.49-4.12v-1.83
c0-0.07,0.06-0.12,0.12-0.12h1.72c0.09,0,0.19-0.02,0.27-0.06c0.25-0.12,0.37-0.39,0.33-0.64c-0.46-2.69-1.3-5.53-1.85-7.27
c3.56-0.05,5.75-1.89,5.78-1.92c0.15-0.13,0.22-0.32,0.2-0.51c-0.02-0.19-0.13-0.36-0.3-0.46c-0.03-0.02-3.07-1.76-5.62-3.38
c-0.17-0.11-0.31-0.28-0.37-0.47c-2.19-6.54-8.67-10.46-14.95-9.07l0.35-0.89c0.12-0.31-0.04-0.67-0.36-0.78
c-0.31-0.11-0.65,0.07-0.77,0.37l-0.34,0.87c-0.05,0.14-0.23,0.19-0.35,0.1l-0.69-0.52c-0.27-0.2-0.65-0.14-0.85,0.13
c-0.19,0.27-0.11,0.64,0.15,0.84l0.74,0.55c-5.7,2.43-8.79,9.05-7.12,15.55c0.05,0.2,0.04,0.4-0.03,0.59
c-0.34,0.99-1.18,3.34-2.03,5.27c-0.07,0.15-0.08,0.32-0.02,0.47c0.09,0.24,0.32,0.38,0.56,0.38c0.01,0,0.03,0,0.04,0
c0.04,0,2.17-0.17,4.39-1.48c0.22,0.56,0.48,1.26,0.69,2.01c-0.4,0.06-0.78,0.29-1,0.66c0,0,0,0,0,0l-4.62,7.56
c-0.28,0.45-0.3,1-0.06,1.47c0.24,0.47,0.69,0.78,1.21,0.83c2.93,0.27,11.11,1.37,23.62,5.75c0.12,0.04,0.25,0.06,0.37,0.06
c0.32,0,0.62-0.13,0.84-0.38c0.3-0.34,0.37-0.83,0.17-1.24c-0.72-1.48-2.29-4.05-5.38-6.8c0.84,0.21,1.68,0.35,2.49,0.42
c0.07,0.01,0.14,0.01,0.2,0.01c0.64,0,1.26-0.23,1.72-0.66c0.47-0.43,0.72-1.02,0.72-1.67v-2.29c2.23,0.86,2.77,2.18,3.39,3.7
c0.38,0.93,0.76,1.89,1.54,2.82c0.8,0.96,1.75,1.43,2.91,1.43c0.27,0,0.56-0.03,0.85-0.08
C296.75,303.92,297.15,300.37,296.91,298.57z M285.22,280.22c1.65,1.04,3.43,2.09,4.44,2.68c-1.61,0.93-5.77,2.54-11.3-1.25
l5.51-1.62C284.32,279.9,284.81,279.97,285.22,280.22z M272.69,270.34c4.78,0,9.32,3.21,11.14,8.16
c0.05,0.15-0.03,0.3-0.18,0.35l-5.99,1.76c-0.1,0.03-0.21-0.03-0.24-0.14c-0.25-1-0.74-2.77-1.58-4.6
c-1.2-2.63-2.68-4.48-4.37-5.47C271.89,270.36,272.29,270.34,272.69,270.34z M269.12,271.08c0.15-0.15,0.37-0.21,0.57-0.15
c4.12,1.11,6.06,7.7,6.59,9.9c0.02,0.1-0.03,0.2-0.13,0.23l-7.73,2.27c-0.1,0.03-0.2-0.02-0.23-0.12
C267.48,281.06,265.68,274.45,269.12,271.08z M266.97,272c-0.94,1.77-1.27,4.06-0.98,6.79c0.22,2.01,0.72,3.77,1.04,4.74
c0.03,0.1-0.02,0.21-0.13,0.24l-4.61,1.35c-0.15,0.04-0.3-0.05-0.34-0.2C260.81,279.76,262.91,274.58,266.97,272z
M261.95,286.82c0.08-0.24,0.28-0.42,0.52-0.49l4.57-1.34c-1.35,4.32-4.91,5.64-6.67,6.03
C261.03,289.4,261.63,287.72,261.95,286.82z M283.89,307.97c-12.54-4.37-20.77-5.48-23.74-5.75c-0.16-0.01-0.23-0.13-0.25-0.17
c-0.02-0.05-0.07-0.18,0.01-0.31c0,0,4.62-7.56,4.62-7.56c0.05-0.08,0.15-0.12,0.24-0.09c4.49,1.44,8.93,3.51,12.67,6.42
C280.02,302.53,282.4,305.02,283.89,307.97z M283.61,292.61v6.31c0,0.39-0.19,0.64-0.34,0.79c-0.26,0.24-0.63,0.36-1.02,0.33
c-1.17-0.09-2.44-0.37-3.64-0.79c-1.06-0.37-2.07-0.89-3.02-1.5c-1.62-1.04-3.49-2.05-5.65-2.99l0.5-2.38
c0.07-0.31-0.13-0.6-0.44-0.7c-1.28-0.42-1.67-1.57-1.78-2.09c-0.27-1.19,0.05-2.43,0.76-3.03c1.42-1.2,2.76-0.33,2.89-0.25
c0.24,0.15,0.43,0.18,0.67,0.05c0.11-0.06,0.19-0.19,0.22-0.29c0.29-0.78,0.7-2.03,1.06-3.08l3.08-0.91
c2.69,2.03,5.14,2.88,7.21,3.1c0.49,1.49,1.29,4.12,1.8,6.69c0.02,0.08-0.04,0.15-0.12,0.15h-1.58
C283.88,292.01,283.61,292.28,283.61,292.61z"/>
</g>
</g>
</g>
</g>
</svg>

In order to get the position of a point on a path you need to use path.getPointAtLength.
Here is what I've done:
I've moved the avatar in a <defs> element so that I can use it latter.
Also I've translated everything in the avatar in the origin of the svg canvas.
The <use> elements can get an x and a y attributes in order to be able to position the used element on the svg canvas. In Javascript I'm calculating the x and y for the avatar using the path.getPointAtLength method.
In this demo an input type range changes the position of the avatar on the path;
In your code you have a transform attribute for the avatar. I'm using this transform for the use element.
Also: for the demo I've changed the value of the viewBox attribute of your svg element. You may change it back at what you want.
let pathlength = path.getTotalLength();
let pos = path.getPointAtLength(0);
theUse.setAttributeNS(null,"x", pos.x);
theUse.setAttributeNS(null,"y", pos.y);
theRange.addEventListener("input", ()=>{
let perc = parseInt(theRange.value);
let leng = pathlength * perc/100;
pos = path.getPointAtLength(leng);
theUse.setAttributeNS(null,"x", pos.x);
theUse.setAttributeNS(null,"y", pos.y);
})
svg{border:1px solid;overflow:visible; width:95vh; display:block; margin:1em auto;}
<input type="range" id="theRange" value="0"/>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="230 200 400 300" xml:space="preserve">
<style type="text/css">
.st5{fill:#43A592;stroke:#8C6239;stroke-width:0.5;stroke-miterlimit:10;}
.st6{fill:none;stroke:#603813;stroke-width:8;stroke-linecap:square;stroke-miterlimit:10;}
.st7{fill:none;stroke:#603813;stroke-width:8;stroke-linecap:square;stroke-miterlimit:10;stroke-dasharray:5.0414,12.0993;}
.st8{fill:#405813;}
.st9{fill:#7FBFD6;}
</style>
<defs>
<g id="avatar" transform="translate(-276.22, -290.06)">
<g>
<g>
<circle class="st9" cx="276.22" cy="290.06" r="26.83"/>
<path class="st8" d="M276.22,317.69c-15.23,0-27.62-12.39-27.62-27.62s12.39-27.62,27.62-27.62s27.62,12.39,27.62,27.62
S291.45,317.69,276.22,317.69z M276.22,264.04c-14.35,0-26.03,11.68-26.03,26.03s11.68,26.03,26.03,26.03
s26.03-11.68,26.03-26.03S290.57,264.04,276.22,264.04z"/>
</g>
<g>
<g>
<path class="st16" d="M264.95,293.51c-0.35-0.11-0.74,0.03-0.93,0.35l-4.62,7.56c-0.35,0.58,0.02,1.33,0.7,1.39
c3.16,0.29,11.31,1.43,23.76,5.78c0.44,0.15,0.86-0.3,0.65-0.73C283.15,305.1,278.44,297.84,264.95,293.51z"/>
</g>
<g>
<path class="st16" d="M284.68,279.17c-2.01-6.83-8.8-10.85-15.17-8.97c-0.04,0.01-0.09,0.03-0.13,0.04
c-0.06-0.01-0.13-0.01-0.19-0.02c-0.07,0.05-0.13,0.09-0.19,0.14c-6.04,2.09-9.34,8.94-7.39,15.59c0,0-0.76,2.95-2.22,5.82
c0,0,6.79-0.4,8.31-7.6c0,0,0.02,0.05,0,0l9.33-2.75c0.01,0.03,0,0,0,0c8.13,6.32,13.75,1.44,13.75,1.44
S287.35,280.89,284.68,279.17z"/>
</g>
<g>
<path class="st8" d="M296.91,298.57c-0.04-0.3-0.29-0.52-0.59-0.52h-3.56c-0.33,0-0.6,0.27-0.6,0.6c0,1.34-0.33,1.94-0.6,2.2
c-0.18,0.18-0.4,0.27-0.65,0.26c-0.47-0.01-1.14-0.76-1.62-1.83c-1.25-2.77-3.05-3.78-4.49-4.12v-1.83
c0-0.07,0.06-0.12,0.12-0.12h1.72c0.09,0,0.19-0.02,0.27-0.06c0.25-0.12,0.37-0.39,0.33-0.64c-0.46-2.69-1.3-5.53-1.85-7.27
c3.56-0.05,5.75-1.89,5.78-1.92c0.15-0.13,0.22-0.32,0.2-0.51c-0.02-0.19-0.13-0.36-0.3-0.46c-0.03-0.02-3.07-1.76-5.62-3.38
c-0.17-0.11-0.31-0.28-0.37-0.47c-2.19-6.54-8.67-10.46-14.95-9.07l0.35-0.89c0.12-0.31-0.04-0.67-0.36-0.78
c-0.31-0.11-0.65,0.07-0.77,0.37l-0.34,0.87c-0.05,0.14-0.23,0.19-0.35,0.1l-0.69-0.52c-0.27-0.2-0.65-0.14-0.85,0.13
c-0.19,0.27-0.11,0.64,0.15,0.84l0.74,0.55c-5.7,2.43-8.79,9.05-7.12,15.55c0.05,0.2,0.04,0.4-0.03,0.59
c-0.34,0.99-1.18,3.34-2.03,5.27c-0.07,0.15-0.08,0.32-0.02,0.47c0.09,0.24,0.32,0.38,0.56,0.38c0.01,0,0.03,0,0.04,0
c0.04,0,2.17-0.17,4.39-1.48c0.22,0.56,0.48,1.26,0.69,2.01c-0.4,0.06-0.78,0.29-1,0.66c0,0,0,0,0,0l-4.62,7.56
c-0.28,0.45-0.3,1-0.06,1.47c0.24,0.47,0.69,0.78,1.21,0.83c2.93,0.27,11.11,1.37,23.62,5.75c0.12,0.04,0.25,0.06,0.37,0.06
c0.32,0,0.62-0.13,0.84-0.38c0.3-0.34,0.37-0.83,0.17-1.24c-0.72-1.48-2.29-4.05-5.38-6.8c0.84,0.21,1.68,0.35,2.49,0.42
c0.07,0.01,0.14,0.01,0.2,0.01c0.64,0,1.26-0.23,1.72-0.66c0.47-0.43,0.72-1.02,0.72-1.67v-2.29c2.23,0.86,2.77,2.18,3.39,3.7
c0.38,0.93,0.76,1.89,1.54,2.82c0.8,0.96,1.75,1.43,2.91,1.43c0.27,0,0.56-0.03,0.85-0.08
C296.75,303.92,297.15,300.37,296.91,298.57z M285.22,280.22c1.65,1.04,3.43,2.09,4.44,2.68c-1.61,0.93-5.77,2.54-11.3-1.25
l5.51-1.62C284.32,279.9,284.81,279.97,285.22,280.22z M272.69,270.34c4.78,0,9.32,3.21,11.14,8.16
c0.05,0.15-0.03,0.3-0.18,0.35l-5.99,1.76c-0.1,0.03-0.21-0.03-0.24-0.14c-0.25-1-0.74-2.77-1.58-4.6
c-1.2-2.63-2.68-4.48-4.37-5.47C271.89,270.36,272.29,270.34,272.69,270.34z M269.12,271.08c0.15-0.15,0.37-0.21,0.57-0.15
c4.12,1.11,6.06,7.7,6.59,9.9c0.02,0.1-0.03,0.2-0.13,0.23l-7.73,2.27c-0.1,0.03-0.2-0.02-0.23-0.12
C267.48,281.06,265.68,274.45,269.12,271.08z M266.97,272c-0.94,1.77-1.27,4.06-0.98,6.79c0.22,2.01,0.72,3.77,1.04,4.74
c0.03,0.1-0.02,0.21-0.13,0.24l-4.61,1.35c-0.15,0.04-0.3-0.05-0.34-0.2C260.81,279.76,262.91,274.58,266.97,272z
M261.95,286.82c0.08-0.24,0.28-0.42,0.52-0.49l4.57-1.34c-1.35,4.32-4.91,5.64-6.67,6.03
C261.03,289.4,261.63,287.72,261.95,286.82z M283.89,307.97c-12.54-4.37-20.77-5.48-23.74-5.75c-0.16-0.01-0.23-0.13-0.25-0.17
c-0.02-0.05-0.07-0.18,0.01-0.31c0,0,4.62-7.56,4.62-7.56c0.05-0.08,0.15-0.12,0.24-0.09c4.49,1.44,8.93,3.51,12.67,6.42
C280.02,302.53,282.4,305.02,283.89,307.97z M283.61,292.61v6.31c0,0.39-0.19,0.64-0.34,0.79c-0.26,0.24-0.63,0.36-1.02,0.33
c-1.17-0.09-2.44-0.37-3.64-0.79c-1.06-0.37-2.07-0.89-3.02-1.5c-1.62-1.04-3.49-2.05-5.65-2.99l0.5-2.38
c0.07-0.31-0.13-0.6-0.44-0.7c-1.28-0.42-1.67-1.57-1.78-2.09c-0.27-1.19,0.05-2.43,0.76-3.03c1.42-1.2,2.76-0.33,2.89-0.25
c0.24,0.15,0.43,0.18,0.67,0.05c0.11-0.06,0.19-0.19,0.22-0.29c0.29-0.78,0.7-2.03,1.06-3.08l3.08-0.91
c2.69,2.03,5.14,2.88,7.21,3.1c0.49,1.49,1.29,4.12,1.8,6.69c0.02,0.08-0.04,0.15-0.12,0.15h-1.58
C283.88,292.01,283.61,292.28,283.61,292.61z"/>
</g>
</g>
</g>
</g>
</defs>
<g>
<path class="st7" id="path" d="M253.83,291.92C438.6,278.28,338.5,457,422.2,429.99c87.72-28.31-71.17-110.68,22.64-190.57
c54.07-46.05,161.79-22.03,138.18,79.89c-13.69,59.11-53.79,87.21-30.99,132.4c0,0,20.26,23.49,61.35,18.96"/>
</g>
<use id="theUse" transform="translate(0,20)" xlink:href="#avatar" />
</svg>

How to morph one SVG path element into another on a click command?

I am trying to make a play and stop button. I don't know how to morph the triangle shape (it is a path) into the square shape (it is a path) when it has been clicked. Only showing one shape at a time. Can anyone help?
<svg class="playStop" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 971 530" style="enable-background:new 0 0 971 530;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;
stroke:#000000;
stroke-width:4;
stroke-miterlimit:10;}
</style>
<path id="playTriangle" class="st0" d="M432,290.7V187.8c0-11.4,9.2-20.7,20.6-20.8c3.2,0,6.3,0.7,9.2,2.2l86.9,43.3l16.2,8.1c10.2,5,14.5,17.5,9.4,27.7c-2,4.1-5.3,7.5-9.4,9.5l-13.4,6.7l-89.8,44.8c-10.2,5-22.6,0.8-27.6-9.5C432.7,297,432,293.9,432,290.7z"/>
<path id="stopSquare" class="st0" d="M458.6,167h91.3c14.7,0,26.6,11.9,26.6,26.6v91.3c0,14.7-11.9,26.6-26.6,26.6h-91.3c-14.7,0-26.6-11.9-26.6-26.6v-91.3C432,178.9,443.9,167,458.6,167z"/>
</svg>

I think one way is to define your two paths in defs and then use a use xlink:href="#shapeName" with an onclick handler that toggles that attribute or the corresponding DOM property, if supported..
A use element object with fully implemented SVG DOM has a href property with a baseVal property that can be read and set, so inside browsers as far as I have tested (with Firefox, Chrome, IE and Edge on Window) we can simply toggle that property, see https://jsfiddle.net/4x0gnkob/ for an online sample.
.st0{fill:none;
stroke:#000000;
stroke-width:4;
stroke-miterlimit:10;}
<svg class="playStop" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 971 530" style="enable-background:new 0 0 971 530;" xml:space="preserve">
<defs>
<path id="playTriangle" class="st0" d="M432,290.7V187.8c0-11.4,9.2-20.7,20.6-20.8c3.2,0,6.3,0.7,9.2,2.2l86.9,43.3l16.2,8.1c10.2,5,14.5,17.5,9.4,27.7c-2,4.1-5.3,7.5-9.4,9.5l-13.4,6.7l-89.8,44.8c-10.2,5-22.6,0.8-27.6-9.5C432.7,297,432,293.9,432,290.7z"/>
<path id="stopSquare" class="st0" d="M458.6,167h91.3c14.7,0,26.6,11.9,26.6,26.6v91.3c0,14.7-11.9,26.6-26.6,26.6h-91.3c-14.7,0-26.6-11.9-26.6-26.6v-91.3C432,178.9,443.9,167,458.6,167z"/>
</defs>
<use xlink:href="#playTriangle" pointer-events="all" onclick="this.href.baseVal = this.href.baseVal == '#playTriangle' ? '#stopSquare' : '#playTriangle';"></use>
</svg>
An alternative is to toggle the DOM attribute, it seems a bit complicated in an HTML5 environment as I thought I could solve it with setAttributeNS and getAttributeNS in one line, after some testing it seems that within HTML5 getAttribute('xlink:href') works better, so the full code tries to test which function returns a value.
function toggleLink(element, value1, value2) {
var xlinkNS = 'http://www.w3.org/1999/xlink';
var linkName = 'xlink:href';
var oldValue = element.getAttributeNS(xlinkNS, linkName) || element.getAttribute(linkName);
if (element.hasAttributeNS(xlinkNS, 'href')) {
element.setAttributeNS(xlinkNS, linkName, oldValue == value1 ? value2 : value1)
}
else {
element.setAttribute(linkName, oldValue == value1 ? value2 : value1);
}
}
.st0{fill:none;
stroke:#000000;
stroke-width:4;
stroke-miterlimit:10;}
<svg class="playStop" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 971 530" style="enable-background:new 0 0 971 530;" xml:space="preserve">
<defs>
<path id="playTriangle" class="st0" d="M432,290.7V187.8c0-11.4,9.2-20.7,20.6-20.8c3.2,0,6.3,0.7,9.2,2.2l86.9,43.3l16.2,8.1c10.2,5,14.5,17.5,9.4,27.7c-2,4.1-5.3,7.5-9.4,9.5l-13.4,6.7l-89.8,44.8c-10.2,5-22.6,0.8-27.6-9.5C432.7,297,432,293.9,432,290.7z"/>
<path id="stopSquare" class="st0" d="M458.6,167h91.3c14.7,0,26.6,11.9,26.6,26.6v91.3c0,14.7-11.9,26.6-26.6,26.6h-91.3c-14.7,0-26.6-11.9-26.6-26.6v-91.3C432,178.9,443.9,167,458.6,167z"/>
</defs>
<use xlink:href="#playTriangle" pointer-events="all" onclick="toggleLink(this, '#stopSquare', '#playTriangle')"></use>
</svg>
Online at https://jsfiddle.net/w36k21uz/1/.

You cannot do all the things just like that, you can either use SMIL, which is to become deprecated, or use a dedicated animation engine. I developed KUTE.js with a SVG Plugin that does most of the things you probably need for SVG.
A quick demo (should work in Firefox only due to some Stackoverflow XSS issue):
<div style="width: 220px">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<path id="rectangle" fill="indigo" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531
c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"></path>
<path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808
l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"></path>
</svg>
</div>
<script id="core" src="https://cdn.jsdelivr.net/kute.js/1.5.5/kute.min.js"></script>
<script id="svg" src="https://cdn.jsdelivr.net/kute.js/1.5.5/kute-svg.min.js"></script>
<script>
var tween = KUTE.to('#rectangle', { path: '#star' }, {duration: 1500, yoyo: true, repeat: 1}).start();
document.addEventListener('click', function(){
!tween.playing && tween.start();
}, false);
</script>

Click Events to Change Complex SVG (Meteor)

So, I added some custom SVG icons to my web app using <img src="/svg.svg">.
I then decided that I wanted to add a toggleClass() to show a clicked state. This led me to a little jQuery snippet which converts an IMG to a full blown svg:
jQuery('img.svg').each(function(){
var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
jQuery.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');
// Add replaced image's ID to the new SVG
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
});
The result is that I end up getting a rather complicated SVG object, with a structure like this:
Parent: SVG
G
Path/Polygon
What I want, is to the target the entire SVG with a click event and to change the fill.
Template.tabsOne.events({
'click .replaced-svg': function(){
$(this).attr('fill', 'blue);
}
})
Unfortunately, I've tried several variations of the click handler and my svg refuses to change its fill. Any suggestions?
EDIT: here's one example:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="209.217px" height="209.216px" viewBox="0 0 209.217 209.216" style="enable-background:new 0 0 209.217 209.216;" xml:space="preserve" class="svg custom-icon replaced-svg">
<g>
<polygon points="104.605,124.953 54.991,124.953 54.991,84.259 104.605,84.259 154.217,84.259 154.217,124.953 "></polygon>
<rect y="84.259" width="44.24" height="40.694"></rect>
<rect x="164.968" y="84.259" width="44.243" height="40.694"></rect>
<polygon points="209.217,73.509 159.593,73.509 109.98,73.509 109.98,22.174 209.217,22.174 "></polygon>
<polygon points="0,22.174 99.229,22.174 99.229,73.509 49.615,73.509 0,73.509 "></polygon>
<polygon points="0,135.704 49.615,135.704 99.229,135.704 99.229,187.042 0,187.042 "></polygon>
<polygon points="209.217,187.042 109.98,187.042 109.98,135.704 159.593,135.704 209.217,135.704 "></polygon>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Here's another one:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="512px" height="640px" viewBox="0 0 512 640" enable-background="new 0 0 512 640" xml:space="preserve" class="black svg custom-icon replaced-svg">
<path d="M165.438,474.562c49.922,49.922,131.031,49.922,180.969,0c49.906-49.922,49.906-131.047,0-180.961L165.438,474.562z M448,0.32L64,0C28.641,0,0,28.641,0,64v512c0,35.359,28.641,64,64,64h384c35.359,0,64-28.641,64-64V64 C512,28.641,483.359,0.32,448,0.32z M192,64c17.602,0,32,14.398,32,32s-14.398,32-32,32s-32-14.398-32-32S174.398,64,192,64z M96,64 c17.602,0,32,14.398,32,32s-14.398,32-32,32s-32-14.398-32-32S78.398,64,96,64z M256,576c-106.078,0-192-85.922-192-192 s85.922-192,192-192s192,85.922,192,192S362.078,576,256,576z" fill="#000000"></path>
</svg>

Something like this (you need to change the fill attribute on the <path> element):
$(document).ready(function(){
$('svg').click(function(e){
$(this).find('path').attr('fill', '#cc0000');
});
});
See this fiddle for a running example
So in your example, this change should do it:
Template.tabsOne.events({
'click .replaced-svg': function(){
$(this).find('path').attr('fill', 'blue');
}
})

Run Draw SVG use CSS

i have SVG path, and i want to make draw animation for this SVG like "CROSS"....
so could you help me guys,...?
<svg version="1.1" id="Layer_1" class="logo-cross" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50%" height="100%" viewBox="0 0 63.7 64.7" style="enable-background:new 0 0 63.7 64.7;" xml:space="preserve">
<style type="text/css">
<![CDATA[.st0{fill:#929396;}.st1{fill:#F00;}]]>
</style>
<g>
<path class="st0" d="M1.3,1h3.5L1.3,4.5V1z M1.3,8.7L9,1h4.2L1.3,12.9V8.7z M1.3,54.7L55.1,1h-4.2L1.3,50.5V54.7z M1,63.1L63.1,1
h-4.2L1,58.9V63.1z M1.3,21.2L21.6,1h-4.2l-16,16V21.2z M1.3,46.3L46.7,1h-4.2L1.3,42.2V46.3z M1.3,38l37-37h-4.2L1.3,33.8V38z
M1.3,29.6L29.9,1h-4.2L1.3,25.4V29.6z"/>
<path class="st1" d="M1,59.6l3.5,3.5H1V59.6z M1,55.4l7.7,7.7h4.2L1,51.2V55.4z M1,13.6l49.5,49.5h4.2L1,9.4V13.6z M1,5.2
l57.9,57.9h4.2L1,1V5.2z M1,47.1l16,16h4.2L1,42.9V47.1z M1,21.9l41.2,41.2h4.2L1,17.7V21.9z M1,30.3l32.8,32.8H38l-37-37V30.3z
M1.3,38.7l24.4,24.4h3.9L1,34.5L1.3,38.7z"/>
</g>
</svg>

I would take a look at the D3 library as it will help you tremendously.