Vue SVG component not loading in DOM - javascript

Hi I'm trying to make a component that loads an svg when used. But the problem is it does not load in the DOM. It always display shadow -root (closed) when I inspect the element.
But it does display when used in image. Reason why I want to use svg than image is I want to be able to change the color.
The inspected element appears as:
<svg aria-hidden="true">
<use xlink:href="/img/apartment.908eb4d5.svg#apartment">
#shadow -root (closed)
</use>
</svg>
Usage
<SvgIcon icon-name="apartment" />
Component
<template>
<svg aria-hidden="true">
<use :xlink:href="require(`#/icons/${iconName}.svg`)+ `#${iconName}`"></use>
</svg>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "SvgIcon",
props: {
iconName: {
type: String,
default: "book"
}
}
});
</script>
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<path fill="#000000" d="M14 6h1v1h-1v-1z"></path>
<path fill="#000000" d="M14 8h1v1h-1v-1z"></path>
<path fill="#000000" d="M14 10h1v1h-1v-1z"></path>
<path fill="#000000" d="M14 12h1v1h-1v-1z"></path>
<path fill="#000000" d="M14 16h1v1h-1v-1z"></path>
<path fill="#000000" d="M14 14h1v1h-1v-1z"></path>
<path fill="#000000" d="M6 6h1v1h-1v-1z"></path>
<path fill="#000000" d="M6 8h1v1h-1v-1z"></path>
<path fill="#000000" d="M6 10h1v1h-1v-1z"></path>
<path fill="#000000" d="M6 12h1v1h-1v-1z"></path>
<path fill="#000000" d="M6 16h1v1h-1v-1z"></path>
<path fill="#000000" d="M6 14h1v1h-1v-1z"></path>
<path fill="#000000" d="M4 6h1v1h-1v-1z"></path>
<path fill="#000000" d="M4 8h1v1h-1v-1z"></path>
<path fill="#000000" d="M4 10h1v1h-1v-1z"></path>
<path fill="#000000" d="M4 12h1v1h-1v-1z"></path>
<path fill="#000000" d="M4 16h1v1h-1v-1z"></path>
<path fill="#000000" d="M4 14h1v1h-1v-1z"></path>
<path fill="#000000" d="M8 6h1v1h-1v-1z"></path>
<path fill="#000000" d="M8 8h1v1h-1v-1z"></path>
<path fill="#000000" d="M8 10h1v1h-1v-1z"></path>
<path fill="#000000" d="M8 12h1v1h-1v-1z"></path>
<path fill="#000000" d="M8 16h1v1h-1v-1z"></path>
<path fill="#000000" d="M8 14h1v1h-1v-1z"></path>
<path fill="#000000" d="M18.5 19h-0.5v-13.5c0-0.763-0.567-1.549-1.291-1.791l-4.709-1.57v-1.64c0-0.158-0.075-0.307-0.202-0.401s-0.291-0.123-0.442-0.078l-9.042 2.713c-0.737 0.221-1.314 0.997-1.314 1.766v14.5h-0.5c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h18c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5zM16.393 4.658c0.318 0.106 0.607 0.507 0.607 0.842v13.5h-5v-15.806l4.393 1.464zM2 4.5c0-0.329 0.287-0.714 0.602-0.808l8.398-2.52v17.828h-9v-14.5z"></path>
</svg>


The <use> element copies the node referenced in href attribute. If you use a fragment link, you must make sure the svg file you load has the appropriate id attribute.
<svg id="apartment" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<path fill="#000000" d="M14 6h1v1h-1v-1z"></path>
...
</svg>
Also xlink:href is deprecated.

Related

How do I add a fill color between lines on an svg?

I have a svg image that contains multiples path and i want to add a background color inside my image.
I want my background color only between my black lines.
Do you know some tools please ?
For the moment, i think i will merge paths and create a polygon. But i think is not a good solution.
Svg:
<svg 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" width="100%" viewBox="0 0 285 261" enable-background="new 0 0 285 261" xml:space="preserve">
<path fill="none" opacity="1.000000" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2.000000"
d="
M164.000000,33.500000
C164.833328,43.333332 165.675537,53.165928 166.498123,63.000156
C168.171005,82.999634 169.910492,102.993973 171.474167,123.002022
C172.606567,137.491669 173.448700,152.003769 174.514191,166.498962
C175.617111,181.503647 176.883545,196.496338 177.976624,211.501709
C178.449387,217.991547 178.666656,224.500000 178.999985,231.000000
"/>
<path fill="none" opacity="1.000000" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2.000000"
d="
M205.000000,33.500000
C211.705887,48.559238 215.482666,64.496674 218.985229,80.503227
C226.634079,115.458031 230.594208,150.944061 233.962753,186.503525
C235.034225,197.814301 235.715897,209.163452 236.456482,220.502838
C236.596710,222.649948 236.929367,224.891998 235.656830,227.817383
C162.666672,234.509201 89.333336,235.739029 15.502701,228.046219
C15.894063,223.319000 16.197031,219.659500 16.499998,216.000000
"/>
<path fill="none" opacity="1.000000" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"
stroke-width="3.000000"
d="
M48.500000,33.000000
C100.500534,33.000000 152.501068,33.000000 204.650604,33.000000
C205.677261,27.124668 203.990173,21.838848 204.576874,16.250000
C152.500000,16.250000 101.000000,16.250000 49.660480,16.250000
C48.325832,18.359861 48.603340,20.451437 48.482582,22.498972
C48.084709,29.245363 46.420258,35.630894 44.107647,42.038849
C33.721039,70.818932 28.822332,100.874130 24.570915,131.010010
C21.013802,156.224365 18.429388,181.560898 16.995337,206.999741
C16.863691,209.335037 16.731928,211.673782 16.478987,213.997711
C16.282843,215.799805 17.442259,215.521439 18.500000,215.500000
"/>
<path fill="none" opacity="1.000000" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"
stroke-width="3.000000"
d="
M164.000000,17.000000
C164.000000,22.166666 164.000000,27.333334 164.000000,32.500000
"/>
</svg>
It looks like :

You should use MASK: use the same path in the mask
<svg 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" width="100%" viewBox="0 0 285 261" enable-background="new 0 0 285 261" xml:space="preserve" style="">
<defs>
<mask id="mask-path1" x="0" y="0" width="1" height="1">
<path fill="#fff" d="
M205.000000,33.500000
C211.705887,48.559238 215.482666,64.496674 218.985229,80.503227
C226.634079,115.458031 230.594208,150.944061 233.962753,186.503525
C235.034225,197.814301 235.715897,209.163452 236.456482,220.502838
C236.596710,222.649948 236.929367,224.891998 235.656830,227.817383
C162.666672,234.509201 89.333336,235.739029 15.502701,228.046219
C15.894063,223.319000 16.197031,219.659500 16.499998,216.000000
"></path>
</mask><mask id="mask-path2" x="0" y="0" width="1" height="1">
<path fill="#fff" d="
M48.500000,33.000000
C100.500534,33.000000 152.501068,33.000000 204.650604,33.000000
C205.677261,27.124668 203.990173,21.838848 204.576874,16.250000
C152.500000,16.250000 101.000000,16.250000 49.660480,16.250000
C48.325832,18.359861 48.603340,20.451437 48.482582,22.498972
C48.084709,29.245363 46.420258,35.630894 44.107647,42.038849
C33.721039,70.818932 28.822332,100.874130 24.570915,131.010010
C21.013802,156.224365 18.429388,181.560898 16.995337,206.999741
C16.863691,209.335037 16.731928,211.673782 16.478987,213.997711
C16.282843,215.799805 17.442259,215.521439 18.500000,215.500000
"></path>
</mask>
</defs>
<path fill="none" opacity="1.000000" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.000000" d="
M164.000000,33.500000
C164.833328,43.333332 165.675537,53.165928 166.498123,63.000156
C168.171005,82.999634 169.910492,102.993973 171.474167,123.002022
C172.606567,137.491669 173.448700,152.003769 174.514191,166.498962
C175.617111,181.503647 176.883545,196.496338 177.976624,211.501709
C178.449387,217.991547 178.666656,224.500000 178.999985,231.000000
" style="
fill: aqua;
" mask="url(#mask-path1)"></path>
<path fill="black" opacity="1.000000" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.000000" d="
M205.000000,33.500000
C211.705887,48.559238 215.482666,64.496674 218.985229,80.503227
C226.634079,115.458031 230.594208,150.944061 233.962753,186.503525
C235.034225,197.814301 235.715897,209.163452 236.456482,220.502838
C236.596710,222.649948 236.929367,224.891998 235.656830,227.817383
C162.666672,234.509201 89.333336,235.739029 15.502701,228.046219
C15.894063,223.319000 16.197031,219.659500 16.499998,216.000000
" mask="url(#mask-path1)"></path>
<path fill="black" opacity="1.000000" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.000000" d="
M48.500000,33.000000
C100.500534,33.000000 152.501068,33.000000 204.650604,33.000000
C205.677261,27.124668 203.990173,21.838848 204.576874,16.250000
C152.500000,16.250000 101.000000,16.250000 49.660480,16.250000
C48.325832,18.359861 48.603340,20.451437 48.482582,22.498972
C48.084709,29.245363 46.420258,35.630894 44.107647,42.038849
C33.721039,70.818932 28.822332,100.874130 24.570915,131.010010
C21.013802,156.224365 18.429388,181.560898 16.995337,206.999741
C16.863691,209.335037 16.731928,211.673782 16.478987,213.997711
C16.282843,215.799805 17.442259,215.521439 18.500000,215.500000
" mask="url(#mask-path2)"></path>
<path fill="none" opacity="1.000000" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.000000" d="
M164.000000,17.000000
C164.000000,22.166666 164.000000,27.333334 164.000000,32.500000
" mask="url(#mask-path1)"></path>
</svg>

why the path code change when I resave an SVG in illustrator

Hi so I don't have much experience in this so I'm little confused why the SVG xml code change after I resave it in illustrator ? are the path change to anther type ?
this how SVG paths looks in notepad++ in it original form
<svg width="82" height="79" viewBox="0 0 82 79" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M69.8096 42.6079C74.6204 40.529 82.5999 32.8914 80.7182 28.5365C78.8363 24.1817 67.8057 24.7589 62.9949 26.8378C58.1841 28.9167 55.8098 34.1321 57.6916 38.487C59.5734 42.8418 64.9988 44.6868 69.8096 42.6079Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M18.262 77.0413C13.9762 77.0413 11.3323 72.3624 13.5434 68.6911L22.1862 54.3413H31.1007L23.3735 73.5855C22.5352 75.6732 20.5117 77.0413 18.262 77.0413Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M30.6561 77.0408C26.506 77.0408 23.6702 72.8464 25.2166 68.9952L31.1008 54.3408H40.0154L36.4032 72.333C35.8535 75.071 33.4486 77.0408 30.6561 77.0408Z" fill="#8CCDE9"/>
<path d="M30.6561 77.0408C26.506 77.0408 23.6702 72.8464 25.2166 68.9952L31.1008 54.3408H40.0154L36.4032 72.333C35.8535 75.071 33.4486 77.0408 30.6561 77.0408Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M42.8632 77.0408C39.0333 77.0408 36.1615 73.5353 36.9154 69.7803L40.0151 54.3408H48.9297V70.9744C48.9297 74.3249 46.2137 77.0408 42.8632 77.0408Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M36.7022 7.27252L36.7021 7.2725C35.541 6.44538 34.1189 6.13104 32.6829 6.39418C31.5026 6.61168 30.3708 5.82862 30.1544 4.65001L30.1543 4.64978C29.938 3.47011 30.7189 2.33811 31.8989 2.12176L31.8989 2.12175C34.4879 1.64722 37.0936 2.21797 39.2224 3.73449C41.3293 5.23543 42.7629 7.53373 43.1473 10.0543C43.3282 11.2401 42.5135 12.3474 41.3286 12.5286C41.2173 12.5458 41.1071 12.5538 40.9989 12.5538C39.9432 12.5538 39.0174 11.7851 38.8533 10.7093L36.7022 7.27252ZM36.7022 7.27252C37.8684 8.10321 38.6478 9.36211 38.8533 10.7092L36.7022 7.27252Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M67.0963 39.3012C67.0963 22.2743 55.4126 8.47119 41.0001 8.47119C26.5876 8.47119 14.9038 22.2743 14.9038 39.3012C14.9038 56.3281 26.5876 61.8259 41.0001 61.8259C55.4126 61.8259 67.0963 56.3281 67.0963 39.3012Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M34.1577 36.4794C36.7419 36.4794 38.8368 34.8111 38.8368 32.7531C38.8368 30.6952 36.7419 29.0269 34.1577 29.0269C31.5735 29.0269 29.4786 30.6952 29.4786 32.7531C29.4786 34.8111 31.5735 36.4794 34.1577 36.4794Z" fill="#FFA6BB"/>
<path d="M59.5204 36.4794C62.1045 36.4794 64.1994 34.8111 64.1994 32.7531C64.1994 30.6952 62.1045 29.0269 59.5204 29.0269C56.9362 29.0269 54.8413 30.6952 54.8413 32.7531C54.8413 34.8111 56.9362 36.4794 59.5204 36.4794Z" fill="#FFA6BB"/>
<path d="M46.1742 25.9936L43.1262 29.6736C42.6048 30.3031 42.6801 31.2334 43.2959 31.7709L45.8273 33.9801C46.4073 34.4862 47.2718 34.4862 47.8518 33.9801L50.3832 31.7709C50.999 31.2334 51.0743 30.3031 50.5529 29.6736L47.505 25.9936C47.1595 25.5764 46.5196 25.5764 46.1742 25.9936Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M39.1124 29.8698C38.4652 29.8698 37.9405 29.3452 37.9405 28.6979C37.9405 28.1159 37.4671 27.6426 36.8852 27.6426C36.3034 27.6426 35.8301 28.1159 35.8301 28.6979C35.8301 29.3452 35.3054 29.8698 34.6582 29.8698C34.011 29.8698 33.4863 29.3452 33.4863 28.6979C33.4863 26.8237 35.011 25.2988 36.8852 25.2988C38.7595 25.2988 40.2843 26.8237 40.2843 28.6979C40.2843 29.3451 39.7598 29.8698 39.1124 29.8698Z" fill="black"/>
<path d="M59.021 29.8698C58.3736 29.8698 57.8491 29.3452 57.8491 28.6979C57.8491 28.1159 57.3757 27.6426 56.7938 27.6426C56.2119 27.6426 55.7385 28.1159 55.7385 28.6979C55.7385 29.3452 55.2139 29.8698 54.5666 29.8698C53.9192 29.8698 53.3947 29.3452 53.3947 28.6979C53.3947 26.8237 54.9196 25.2988 56.7938 25.2988C58.668 25.2988 60.1928 26.8237 60.1928 28.6979C60.1928 29.3451 59.6683 29.8698 59.021 29.8698Z" fill="black"/>
<path d="M38.3904 66.1445C36.7035 66.1445 35.3362 64.7771 35.3362 63.0903V59.7134C35.3362 58.0265 36.7035 56.6592 38.3904 56.6592C40.0773 56.6592 41.4446 58.0265 41.4446 59.7134V63.0903C41.4446 64.7771 40.0773 66.1445 38.3904 66.1445Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M54.2496 66.1445C55.9365 66.1445 57.3038 64.7771 57.3038 63.0903V59.7134C57.3038 58.0265 55.9365 56.6592 54.2496 56.6592C52.5627 56.6592 51.1954 58.0265 51.1954 59.7134V63.0903C51.1954 64.7771 52.5627 66.1445 54.2496 66.1445Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M12.1904 42.6079C7.37966 40.529 -0.599872 32.8914 1.28185 28.5365C3.16372 24.1817 14.1943 24.7589 19.0051 26.8378C23.8159 28.9167 26.1903 34.1321 24.3084 38.487C22.4267 42.8418 17.0012 44.6868 12.1904 42.6079Z" fill="white" stroke="#222222" stroke-width="2"/>
</svg>
and this after I resave it in illustrator without changing any thing
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-308 411 82 79"
style="enable-background:new -308 411 82 79;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;stroke:#222222;stroke-width:2;}
.st1{fill:#8CCDE9;}
.st2{fill:#FFA6BB;}
</style>
<metadata>
<sfw xmlns="&ns_sfw;">
<slices></slices>
<sliceSourceBounds width="82" height="77.1" bottomLeftOrigin="true" x="0" y="1"></sliceSourceBounds>
</sfw>
</metadata>
<path class="st0" d="M-238.2,453.6c4.8-2.1,12.8-9.7,10.9-14.1c-1.9-4.4-12.9-3.8-17.7-1.7c-4.8,2.1-7.2,7.3-5.3,11.6
C-248.4,453.8-243,455.7-238.2,453.6z"/>
<path class="st0" d="M-289.7,488c-4.3,0-6.9-4.7-4.7-8.4l8.6-14.3h8.9l-7.7,19.2C-285.5,486.7-287.5,488-289.7,488z"/>
<path class="st1" d="M-277.3,488c-4.2,0-7-4.2-5.4-8l5.9-14.7h8.9l-3.6,18C-272.1,486.1-274.6,488-277.3,488z"/>
<path class="st0" d="M-277.3,488c-4.2,0-7-4.2-5.4-8l5.9-14.7h8.9l-3.6,18C-272.1,486.1-274.6,488-277.3,488z"/>
<path class="st0" d="M-265.1,488c-3.8,0-6.7-3.5-5.9-7.3l3.1-15.4h8.9V482C-259.1,485.3-261.8,488-265.1,488z"/>
<path class="st0" d="M-271.3,418.3L-271.3,418.3c-1.2-0.8-2.6-1.1-4-0.9c-1.2,0.2-2.3-0.6-2.5-1.7l0,0c-0.2-1.2,0.6-2.3,1.7-2.5l0,0
c2.6-0.5,5.2,0.1,7.3,1.6c2.1,1.5,3.5,3.8,3.9,6.3c0.2,1.2-0.6,2.3-1.8,2.5c-0.1,0-0.2,0-0.3,0c-1.1,0-2-0.8-2.1-1.8L-271.3,418.3z
M-271.3,418.3c1.2,0.8,1.9,2.1,2.2,3.4L-271.3,418.3z"/>
<path class="st0" d="M-240.9,450.3c0-17-11.7-30.8-26.1-30.8s-26.1,13.8-26.1,30.8c0,17,11.7,22.5,26.1,22.5
S-240.9,467.3-240.9,450.3z"/>
<path class="st2" d="M-273.8,447.5c2.6,0,4.7-1.7,4.7-3.7c0-2.1-2.1-3.7-4.7-3.7c-2.6,0-4.7,1.7-4.7,3.7
C-278.5,445.8-276.4,447.5-273.8,447.5z"/>
<path class="st2" d="M-248.5,447.5c2.6,0,4.7-1.7,4.7-3.7c0-2.1-2.1-3.7-4.7-3.7c-2.6,0-4.7,1.7-4.7,3.7
C-253.2,445.8-251.1,447.5-248.5,447.5z"/>
<path class="st0" d="M-261.8,437l-3,3.7c-0.5,0.6-0.4,1.6,0.2,2.1l2.5,2.2c0.6,0.5,1.4,0.5,2,0l2.5-2.2c0.6-0.5,0.7-1.5,0.2-2.1
l-3-3.7C-260.8,436.6-261.5,436.6-261.8,437z"/>
<path d="M-268.9,440.9c-0.6,0-1.2-0.5-1.2-1.2c0-0.6-0.5-1.1-1.1-1.1c-0.6,0-1.1,0.5-1.1,1.1c0,0.6-0.5,1.2-1.2,1.2
c-0.6,0-1.2-0.5-1.2-1.2c0-1.9,1.5-3.4,3.4-3.4c1.9,0,3.4,1.5,3.4,3.4C-267.7,440.3-268.2,440.9-268.9,440.9z"/>
<path d="M-249,440.9c-0.6,0-1.2-0.5-1.2-1.2c0-0.6-0.5-1.1-1.1-1.1c-0.6,0-1.1,0.5-1.1,1.1c0,0.6-0.5,1.2-1.2,1.2
c-0.6,0-1.2-0.5-1.2-1.2c0-1.9,1.5-3.4,3.4-3.4c1.9,0,3.4,1.5,3.4,3.4C-247.8,440.3-248.3,440.9-249,440.9z"/>
<path class="st0" d="M-269.6,477.1c-1.7,0-3.1-1.4-3.1-3.1v-3.4c0-1.7,1.4-3.1,3.1-3.1c1.7,0,3.1,1.4,3.1,3.1v3.4
C-266.6,475.8-267.9,477.1-269.6,477.1z"/>
<path class="st0" d="M-253.8,477.1c1.7,0,3.1-1.4,3.1-3.1v-3.4c0-1.7-1.4-3.1-3.1-3.1c-1.7,0-3.1,1.4-3.1,3.1v3.4
C-256.8,475.8-255.4,477.1-253.8,477.1z"/>
<path class="st0" d="M-295.8,453.6c-4.8-2.1-12.8-9.7-10.9-14.1c1.9-4.4,12.9-3.8,17.7-1.7s7.2,7.3,5.3,11.6
C-285.6,453.8-291,455.7-295.8,453.6z"/>
</svg>
thank you

Did you perhaps move the image between importing and saving? The viewBox X and Y has changed, and the path coordinates have been adjusted to match.
Before: viewBox="0 0 82 79"
After: viewBox="-308 411 82 79"

well I finally get the answer first I open the svg code in windows and open it in mac same svg but the code was not the same so in my illustrator in mac i put in the styling :internal css and in the decimal : 5 after that I transformed the the path to absolute and that fixed the problem .

How to change fill color SVG object for specific path id via AngularJS

svg:
<path id="svg_1" stroke-width="0.5" stroke="black" fill="none" d="m50.610001,63.470001l12.869999,0m0,0l0,464.709991m0,0l-12.869999,0m0,0l0,-464.709991"/>
<path id="svg_2" stroke-width="0.5" stroke="black" fill="none" d="m66.529999,260.670013l12.870003,0m0,0l-0.029999,267.519989m0,0l-12.870003,0m0,0l0.029999,-267.519989"/>
<path id="svg_3" stroke-width="0.5" stroke="black" fill="none" d="m66.519997,275.440002l-3.039997,0"/>
html:
<div ng-include="'example.svg'"></div>
I would like to change fill color for id="svg_2" for example on button click, How to do it?

The problem are your paths. After every line you are using a move to command (m) where you are moving to the last point. I've rewritten the first 2 paths bu removing the move to (m0,0) Now the paths can be filled. The third path is just a line.
Now you can fill the paths using css or bu resetting the value of the attribute fill
path{fill:red}
<svg viewBox="0 0 130 600" width="100">
<path id="svg_1" stroke-width="0.5" stroke="black" fill="none" d="M50.610001,63.470001l12.869999,0
l0,464.709991
l-12.869999,0
l0,-464.709991"/>
<path id="svg_2" stroke-width="0.5" stroke="black" fill="none" d="M66.529999,260.670013l12.870003,0
l-0.029999,267.519989
l-12.870003,0
l0.029999,-267.519989"/>
<path id="svg_3" stroke-width="0.5" stroke="black" fill="none" d="m66.519997,275.440002l-3.039997,0"/>
</svg>

SVG Glow Effect in CSS / JS / Jquery

I have a question regarding SVG Glow effect. I would like to set glow to group "suteki_201_" similar to the RED effect in this link: https://codepen.io/FelixRilling/pen/qzfoc (I would like his eyes to neon glow - blink animation in different color) i tried using different styles but no success... could you please help?
My code for SVG image is:
<svg version="1.1" id="Marko" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<style type="text/css">
.dane0{fill:#D3D3D3;}
.dane1{fill:#B0B0B0;}
.dane2{fill:#303347;}
.dane3{opacity:0.54;fill:#4A4D67;}
.dane4{opacity:0.54;fill:#5F6380;}
.dane5{opacity:0.37;fill:#010101;}
.dane6{opacity:0.67;fill:#4A4D67;}
.dane7{fill:#010101;}
.dane8{opacity:0.72;}
.dane9{fill:#77CFE2;}
.dane10{fill:#9BD9E2;}
.dane11{fill:#FBF5A9;}
.dane12{fill:#C6C473;}
.dane13{fill:#A3A061;}
.dane14{opacity:0.67;}
.dane15{fill:#242733;}
.dane16{opacity:0.25;fill:#17191F;}
</style>
<g id="suteki_202_">
<path id="suteki_73_" class="dane0" d="M176.5,174.3c-2.7-0.1-3.3,4.8-3.3,4.8c4,9.4,12.2,16.7,12.2,16.7c-3.9-15.1-1.6-17.3-1.6-17.3
S179.2,174.4,176.5,174.3z"/>
<path id="suteki_72_" class="dane1" d="M175.8,179.7c2.4,5.7,6.4,10.7,9.2,13.6c0.2,0.7,0.4,1.5,0.6,2.3c0,0-8.2-7.3-12.2-16.7
c0,0,0.6-4.8,3.3-4.8c0.7,0,1.6,0.3,2.4,0.8C176.4,174.9,175.8,179.7,175.8,179.7z"/>
<g id="suteki_283_">
<path id="suteki_71_" class="dane2" d="M184.3,207.6c0,0-27.3-29.9-16.4-28.8c55.5,7.9,104.7,50.7,104.7,50.7s21.9,18.8,25.8,65.7
c0,0-13.3,38.9-54.7,46.1c0,0-23.2-3.4-37-16.4c0,0,13.9,19.5,44.4,37.1c0,0,15.2,5.9,56.7-30.5l2.3-16.8c0,0,7.4-15.6,36.7-24.6
c0,0,35.4,8.4,66.1-6.2c31.9-15.2,36.7-29.2,23-65.6c-44.6-27.2-121.9-61.5-121.9-61.5c-71.9-16.4-184.5-11.7-184.5-11.7
S129.6,184.2,184.3,207.6z"/>
</g>
<path id="suteki_70_" class="dane3" d="M350.8,226.7c0,0-6.3,11.2-16.2,8.6c-9.9-2.6-30.8-30.7-30.8-30.7s22.2,21.6,31.5,23.7
C344.5,230.6,350.8,226.7,350.8,226.7z"/>
<path id="suteki_69_" class="dane4" d="M340,239.8c0,0-6.9,8.6-22.1-1.7c-11.1-7.5-13.5-22.3-27-43.2c17.3,18.7,20.4,30.1,30.6,37.1
C335.4,241.6,340,239.8,340,239.8z"/>
<path id="suteki_68_" class="dane5" d="M362.1,227.6C349.9,239,326,252.3,326,252.3s2.7,16-0.5,22c-3.3,6-8.5,3.1-8.5,3.1
s-4.9-25.6-32.8-54.7c-86-75.6-118-43.7-118-43.7c55.1,4.4,106.6,50.4,106.6,50.4s21.9,18.8,25.8,65.7c0,0-13.3,38.9-54.7,46.1
c0,0-23.2-3.4-37-16.4c0,0,13.9,19.5,44.4,37.1c0,0,15.2,5.9,56.7-30.5l2.3-16.8c0,0,7.4-15.6,36.7-24.6c0,0,32.8,7,64.1-6.3
c0,0,6.3-2.3,19.2-10.5C411.1,257.1,362.1,227.6,362.1,227.6z"/>
<path id="suteki_67_" class="dane6" d="M165.3,162.3c54.2-4.7,122.7,27.2,122.7,27.2l62.5,11.8c0,0,1.1,10.7,5.7,22.4l74.1,49.6
c14.3-10.9,15.8-26.6,5.7-55c0,0-29.6-20-121.9-61.5c-68.6-16.3-184.5-11.7-184.5-11.7s0,39.1,54.7,62.5
C184.3,207.6,135.6,168.3,165.3,162.3z"/>
<path id="suteki_66_" class="dane7" d="M356.2,223.7l-22.2,0.2l-46-34.4l10.2,1.9c0,0-0.4-1.7,2.6-5c0,0-1.6,3.9-0.1,5.4l5,0.9
c0,0-0.3-5.1,3.3-6.8c0,0-2.8,3.1-0.2,7.4l41.8,7.7L356.2,223.7z"/>
<g id="suteki_201_">
<g id="suteki_276_" class="dane8">
<path id="suteki_65_" class="dane9" d="M330,211.5c5.5,0,10-4.5,10-10c0-0.9-0.2-1.7-0.4-2.6l-17.7-3.2c-1.2,1.7-1.9,3.6-1.9,5.8
C320,207,324.5,211.5,330,211.5z"/>
</g>
<g id="suteki_274_" class="dane8">
<path id="suteki_64_" class="dane9" d="M329,207.9c3.5,0,6.3-2.8,6.3-6.3c0-0.6-0.1-1.1-0.2-1.6l-11.2-2.1c-0.8,1-1.2,2.3-1.2,3.7
C322.6,205.1,325.5,207.9,329,207.9z"/>
</g>
<g id="suteki_272_" class="dane8">
<path id="suteki_63_" class="dane10" d="M334,204.7c2,0,3.6-1.6,3.6-3.6c0-0.3-0.1-0.6-0.1-0.9l-6.4-1.2c-0.4,0.6-0.7,1.3-0.7,2.1
C330.4,203.1,332,204.7,334,204.7z"/>
</g>
</g>
<path id="suteki_62_" class="dane0" d="M190.3,174c-3.9-0.1-4.8,6.9-4.8,6.9c5.8,13.6,17.7,24.2,17.7,24.2
c-5.6-21.8-2.4-25.1-2.4-25.1S194.2,174.1,190.3,174z"/>
<path id="suteki_61_" class="dane1" d="M189.3,181.8c3.5,8.3,9.3,15.4,13.3,19.8c0.2,1.1,0.5,2.1,0.8,3.3c0,0-11.9-10.6-17.7-24.2
c0,0,0.8-7,4.8-6.9c1,0,2.3,0.5,3.5,1.1C190.1,174.9,189.3,181.8,189.3,181.8z"/>
<path id="suteki_60_" class="dane11" d="M434.8,269.4c0,0-53.7-41.9-72.8-50.3c0,0-1.9-16-5.8-24c0,0-11.9-12.2-69.2-10.5
c0,0-82.3-34-131.3-23.3l3.3-2c51.3-8.3,128.8,21.7,128.8,21.7c37.1-2.1,72.2,8.4,72.2,8.4c5.2,8.8,7.2,26.4,7.2,26.4
c25.4,12.8,71,49.8,71,49.8S436.7,267.6,434.8,269.4z"/>
<g id="suteki_266_">
<path id="suteki_59_" class="dane12" d="M364.8,217c0,0-1.2-17-6.4-25.8c0,0-29-11.4-71-8.1c0,0-46.3-16.9-87.3-23l-2.5,1.1
c41,5.9,89.4,23.5,89.4,23.5c57.3-1.8,69.2,10.5,69.2,10.5c3.9,7.9,5.8,24,5.8,24c19.1,8.5,72.8,50.3,72.8,50.3
c2-2.1,3.4-3.8,3.4-3.8S390.2,229.7,364.8,217z"/>
<path id="suteki_58_" class="dane13" d="M157.2,160.5l-1.5,0.9c14.5-2.6,25.6-2.6,41.9-0.2l2.5-1.1
C184.2,157.7,168.1,158,157.2,160.5z"/>
</g>
<g id="suteki_263_" class="dane14">
<path id="suteki_57_" class="dane15" d="M363.9,217.8c0,0-1.2-17-6.4-25.8c0,0-29-11.4-71-8.1c0,0-46.3-16.9-87.3-23l-2.5,1.1
c41,5.9,89.4,23.5,89.4,23.5c57.3-1.8,69.2,10.5,69.2,10.5c3.9,7.9,5.8,24,5.8,24c19.1,8.5,72.8,50.3,72.8,50.3
c1.9-1.4,3.7-3.6,3.7-3.6S389.3,230.5,363.9,217.8z"/>
<path id="suteki_56_" class="dane15" d="M155.7,161.4l-1.4,0.7c15-2.2,26.1-2.5,42.3-0.2l2.5-1.1
C183.3,158.5,166.6,158.9,155.7,161.4z"/>
</g>
<path id="suteki_55_" class="dane16" d="M436.2,218.6c11.6,39.4-17.1,70.5-93,56.6c-43.3,21-56.6,74.4-56.6,74.4l21.7-17.1l1.9-17.8
c0,0,7.4-15.6,36.7-24.6c0,0,33.3,7.7,64.6-5.6C417.2,280.4,460.8,270.4,436.2,218.6z"/>
<path id="suteki_54_" class="dane5" d="M350.6,201c-2.8-0.5-62.6-11.5-62.6-11.5c-37.3-15.4-69.2-25-99.9-27.2
c-55.8-5.4-27.8,23.7-5.3,44.3l1.5,1c0,0-54.7-46.5-7.6-44.2c55-0.5,111.3,29.1,111.3,29.1l58.9,11.7c0,0,2.6,7,3.6,19.4l75.7,52.2
c1.8-1.2,2.7-1.7,4.2-2.7l-74.1-49.6C353.2,211.6,350.6,201,350.6,201z"/>
<path id="suteki_53_" class="dane7" d="M430.9,273.3c0,0-23.3,22.1-72.6,18.3c0,0,51.7-6.3,62.4-24.7L430.9,273.3z"/>
<g id="suteki_252_">
<path id="suteki_51_" class="dane0" d="M270.2,365.1c-2.5,1.2-4.9-3-4.9-3c-0.1-10.2,4.5-20.2,4.5-20.2c2.5,15.4,5.4,16.5,5.4,16.5
S272.7,363.9,270.2,365.1z"/>
<path id="suteki_50_" class="dane0" d="M308.3,339.8c-2.6,3.1-8.6-1-8.6-1c-6.5-13.8-6.5-30.2-6.5-30.2c13,19.3,17.7,19,17.7,19
S310.9,336.7,308.3,339.8z"/>
<path id="suteki_49_" class="dane0" d="M291.4,358.6c-2.9,2.8-8.4-1.9-8.4-1.9c-5-14.4-3.3-30.7-3.3-30.7
c11,20.5,15.6,20.8,15.6,20.8S294.3,355.7,291.4,358.6z"/>
<path id="suteki_48_" class="dane1" d="M301.9,335.5c-3.9-8.2-5.4-17.4-6.1-23.5c-0.8-1.1-1.6-2.2-2.4-3.4c0,0,0,16.4,6.5,30.2
c0,0,6,4.2,8.6,1c0.6-0.7,1-1.7,1.4-2.9C307.1,339.1,301.9,335.5,301.9,335.5z"/>
<path id="suteki_47_" class="dane1" d="M267.4,360.5c-0.1-6.2,1.6-12.3,3-16.2c-0.1-0.7-0.3-1.5-0.4-2.3c0,0-4.6,10-4.5,20.2
c0,0,2.5,4.2,4.9,3c0.7-0.3,1.3-0.9,1.9-1.7C269.9,364.6,267.4,360.5,267.4,360.5z"/>
<path id="suteki_46_" class="dane1" d="M284.9,353.3c-3.1-8.8-3.6-18.3-3.6-24.3c-0.5-1-1.1-2-1.7-3.1c0,0-1.7,16.3,3.3,30.7
c0,0,5.5,4.8,8.4,1.9c0.8-0.8,1.4-2,1.9-3.3C290.4,358,284.9,353.3,284.9,353.3z"/>
</g>
</g>
</svg>
Thank you for your time!!!

Here is my solution, Its not perfect, but you can play with the colors,opacity and timings.
To get the blur efects, I added Gaussian blur to svg
More info on Gauusian Blur effect here here
<defs>
<filter id="f1">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
Then, to apply the blur to any path / g add filter="url(#f1)".
Notice the id: ( f1 )
I had to apply the filter to suteki_65_ to make the outer circle glow and also had to duplicate the circle in order to retain the shape of the eye, as the filter effect blurs the shape.
And finally I applied CSS animation, to suteki_65_ in order to make it blink
by changing the opacity.
#keyframes blink {
0% {
opacity: 1;
fill:red;
}
25% {
opacity: 0.5;
fill:pink;
}
50% {
opacity: 1;
fill:orange;
}
75% {
opacity: 0.5;
fill:blue;
}
100% {
opacity:1;
fill:yellow;
}
}
#suteki_65_ {
animation: blink 1500ms infinite;
}
#suteki_65a_ {
opacity: 0.3;
}
<svg version="1.1" id="Marko" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<defs>
<filter id="f1">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<style type="text/css">
.dane0{fill:#D3D3D3;}
.dane1{fill:#B0B0B0;}
.dane2{fill:#303347;}
.dane3{opacity:0.54;fill:#4A4D67;}
.dane4{opacity:0.54;fill:#5F6380;}
.dane5{opacity:0.37;fill:#010101;}
.dane6{opacity:0.67;fill:#4A4D67;}
.dane7{fill:#010101;}
.dane8{opacity:0.72;}
.dane9{fill:#77CFE2;}
.dane10{fill:#9BD9E2;}
.dane11{fill:#FBF5A9;}
.dane12{fill:#C6C473;}
.dane13{fill:#A3A061;}
.dane14{opacity:0.67;}
.dane15{fill:#242733;}
.dane16{opacity:0.25;fill:#17191F;}
</style>
<g id="suteki_202_">
<path id="suteki_73_" class="dane0" d="M176.5,174.3c-2.7-0.1-3.3,4.8-3.3,4.8c4,9.4,12.2,16.7,12.2,16.7c-3.9-15.1-1.6-17.3-1.6-17.3
S179.2,174.4,176.5,174.3z"/>
<path id="suteki_72_" class="dane1" d="M175.8,179.7c2.4,5.7,6.4,10.7,9.2,13.6c0.2,0.7,0.4,1.5,0.6,2.3c0,0-8.2-7.3-12.2-16.7
c0,0,0.6-4.8,3.3-4.8c0.7,0,1.6,0.3,2.4,0.8C176.4,174.9,175.8,179.7,175.8,179.7z"/>
<g id="suteki_283_">
<path id="suteki_71_" class="dane2" d="M184.3,207.6c0,0-27.3-29.9-16.4-28.8c55.5,7.9,104.7,50.7,104.7,50.7s21.9,18.8,25.8,65.7
c0,0-13.3,38.9-54.7,46.1c0,0-23.2-3.4-37-16.4c0,0,13.9,19.5,44.4,37.1c0,0,15.2,5.9,56.7-30.5l2.3-16.8c0,0,7.4-15.6,36.7-24.6
c0,0,35.4,8.4,66.1-6.2c31.9-15.2,36.7-29.2,23-65.6c-44.6-27.2-121.9-61.5-121.9-61.5c-71.9-16.4-184.5-11.7-184.5-11.7
S129.6,184.2,184.3,207.6z"/>
</g>
<path id="suteki_70_" class="dane3" d="M350.8,226.7c0,0-6.3,11.2-16.2,8.6c-9.9-2.6-30.8-30.7-30.8-30.7s22.2,21.6,31.5,23.7
C344.5,230.6,350.8,226.7,350.8,226.7z"/>
<path id="suteki_69_" class="dane4" d="M340,239.8c0,0-6.9,8.6-22.1-1.7c-11.1-7.5-13.5-22.3-27-43.2c17.3,18.7,20.4,30.1,30.6,37.1
C335.4,241.6,340,239.8,340,239.8z"/>
<path id="suteki_68_" class="dane5" d="M362.1,227.6C349.9,239,326,252.3,326,252.3s2.7,16-0.5,22c-3.3,6-8.5,3.1-8.5,3.1
s-4.9-25.6-32.8-54.7c-86-75.6-118-43.7-118-43.7c55.1,4.4,106.6,50.4,106.6,50.4s21.9,18.8,25.8,65.7c0,0-13.3,38.9-54.7,46.1
c0,0-23.2-3.4-37-16.4c0,0,13.9,19.5,44.4,37.1c0,0,15.2,5.9,56.7-30.5l2.3-16.8c0,0,7.4-15.6,36.7-24.6c0,0,32.8,7,64.1-6.3
c0,0,6.3-2.3,19.2-10.5C411.1,257.1,362.1,227.6,362.1,227.6z"/>
<path id="suteki_67_" class="dane6" d="M165.3,162.3c54.2-4.7,122.7,27.2,122.7,27.2l62.5,11.8c0,0,1.1,10.7,5.7,22.4l74.1,49.6
c14.3-10.9,15.8-26.6,5.7-55c0,0-29.6-20-121.9-61.5c-68.6-16.3-184.5-11.7-184.5-11.7s0,39.1,54.7,62.5
C184.3,207.6,135.6,168.3,165.3,162.3z"/>
<path id="suteki_66_" class="dane7" d="M356.2,223.7l-22.2,0.2l-46-34.4l10.2,1.9c0,0-0.4-1.7,2.6-5c0,0-1.6,3.9-0.1,5.4l5,0.9
c0,0-0.3-5.1,3.3-6.8c0,0-2.8,3.1-0.2,7.4l41.8,7.7L356.2,223.7z"/>
<g id="suteki_201_" >
<g id="suteki_276_" class="dane8">
<path id="suteki_65a_" class="dane9" d="M330,211.5c5.5,0,10-4.5,10-10c0-0.9-0.2-1.7-0.4-2.6l-17.7-3.2c-1.2,1.7-1.9,3.6-1.9,5.8
C320,207,324.5,211.5,330,211.5z"/>
<path id="suteki_65_" filter="url(#f1)" class="dane9" d="M330,211.5c5.5,0,10-4.5,10-10c0-0.9-0.2-1.7-0.4-2.6l-17.7-3.2c-1.2,1.7-1.9,3.6-1.9,5.8
C320,207,324.5,211.5,330,211.5z"/>
</g>
<g id="suteki_274_" class="dane8">
<path id="suteki_64_" class="dane9" d="M329,207.9c3.5,0,6.3-2.8,6.3-6.3c0-0.6-0.1-1.1-0.2-1.6l-11.2-2.1c-0.8,1-1.2,2.3-1.2,3.7
C322.6,205.1,325.5,207.9,329,207.9z"/>
</g>
<g id="suteki_272_" class="dane8">
<path id="suteki_63_" class="dane10" d="M334,204.7c2,0,3.6-1.6,3.6-3.6c0-0.3-0.1-0.6-0.1-0.9l-6.4-1.2c-0.4,0.6-0.7,1.3-0.7,2.1
C330.4,203.1,332,204.7,334,204.7z"/>
</g>
</g>
<path id="suteki_62_" class="dane0" d="M190.3,174c-3.9-0.1-4.8,6.9-4.8,6.9c5.8,13.6,17.7,24.2,17.7,24.2
c-5.6-21.8-2.4-25.1-2.4-25.1S194.2,174.1,190.3,174z"/>
<path id="suteki_61_" class="dane1" d="M189.3,181.8c3.5,8.3,9.3,15.4,13.3,19.8c0.2,1.1,0.5,2.1,0.8,3.3c0,0-11.9-10.6-17.7-24.2
c0,0,0.8-7,4.8-6.9c1,0,2.3,0.5,3.5,1.1C190.1,174.9,189.3,181.8,189.3,181.8z"/>
<path id="suteki_60_" class="dane11" d="M434.8,269.4c0,0-53.7-41.9-72.8-50.3c0,0-1.9-16-5.8-24c0,0-11.9-12.2-69.2-10.5
c0,0-82.3-34-131.3-23.3l3.3-2c51.3-8.3,128.8,21.7,128.8,21.7c37.1-2.1,72.2,8.4,72.2,8.4c5.2,8.8,7.2,26.4,7.2,26.4
c25.4,12.8,71,49.8,71,49.8S436.7,267.6,434.8,269.4z"/>
<g id="suteki_266_">
<path id="suteki_59_" class="dane12" d="M364.8,217c0,0-1.2-17-6.4-25.8c0,0-29-11.4-71-8.1c0,0-46.3-16.9-87.3-23l-2.5,1.1
c41,5.9,89.4,23.5,89.4,23.5c57.3-1.8,69.2,10.5,69.2,10.5c3.9,7.9,5.8,24,5.8,24c19.1,8.5,72.8,50.3,72.8,50.3
c2-2.1,3.4-3.8,3.4-3.8S390.2,229.7,364.8,217z"/>
<path id="suteki_58_" class="dane13" d="M157.2,160.5l-1.5,0.9c14.5-2.6,25.6-2.6,41.9-0.2l2.5-1.1
C184.2,157.7,168.1,158,157.2,160.5z"/>
</g>
<g id="suteki_263_" class="dane14">
<path id="suteki_57_" class="dane15" d="M363.9,217.8c0,0-1.2-17-6.4-25.8c0,0-29-11.4-71-8.1c0,0-46.3-16.9-87.3-23l-2.5,1.1
c41,5.9,89.4,23.5,89.4,23.5c57.3-1.8,69.2,10.5,69.2,10.5c3.9,7.9,5.8,24,5.8,24c19.1,8.5,72.8,50.3,72.8,50.3
c1.9-1.4,3.7-3.6,3.7-3.6S389.3,230.5,363.9,217.8z"/>
<path id="suteki_56_" class="dane15" d="M155.7,161.4l-1.4,0.7c15-2.2,26.1-2.5,42.3-0.2l2.5-1.1
C183.3,158.5,166.6,158.9,155.7,161.4z"/>
</g>
<path id="suteki_55_" class="dane16" d="M436.2,218.6c11.6,39.4-17.1,70.5-93,56.6c-43.3,21-56.6,74.4-56.6,74.4l21.7-17.1l1.9-17.8
c0,0,7.4-15.6,36.7-24.6c0,0,33.3,7.7,64.6-5.6C417.2,280.4,460.8,270.4,436.2,218.6z"/>
<path id="suteki_54_" class="dane5" d="M350.6,201c-2.8-0.5-62.6-11.5-62.6-11.5c-37.3-15.4-69.2-25-99.9-27.2
c-55.8-5.4-27.8,23.7-5.3,44.3l1.5,1c0,0-54.7-46.5-7.6-44.2c55-0.5,111.3,29.1,111.3,29.1l58.9,11.7c0,0,2.6,7,3.6,19.4l75.7,52.2
c1.8-1.2,2.7-1.7,4.2-2.7l-74.1-49.6C353.2,211.6,350.6,201,350.6,201z"/>
<path id="suteki_53_" class="dane7" d="M430.9,273.3c0,0-23.3,22.1-72.6,18.3c0,0,51.7-6.3,62.4-24.7L430.9,273.3z"/>
<g id="suteki_252_">
<path id="suteki_51_" class="dane0" d="M270.2,365.1c-2.5,1.2-4.9-3-4.9-3c-0.1-10.2,4.5-20.2,4.5-20.2c2.5,15.4,5.4,16.5,5.4,16.5
S272.7,363.9,270.2,365.1z"/>
<path id="suteki_50_" class="dane0" d="M308.3,339.8c-2.6,3.1-8.6-1-8.6-1c-6.5-13.8-6.5-30.2-6.5-30.2c13,19.3,17.7,19,17.7,19
S310.9,336.7,308.3,339.8z"/>
<path id="suteki_49_" class="dane0" d="M291.4,358.6c-2.9,2.8-8.4-1.9-8.4-1.9c-5-14.4-3.3-30.7-3.3-30.7
c11,20.5,15.6,20.8,15.6,20.8S294.3,355.7,291.4,358.6z"/>
<path id="suteki_48_" class="dane1" d="M301.9,335.5c-3.9-8.2-5.4-17.4-6.1-23.5c-0.8-1.1-1.6-2.2-2.4-3.4c0,0,0,16.4,6.5,30.2
c0,0,6,4.2,8.6,1c0.6-0.7,1-1.7,1.4-2.9C307.1,339.1,301.9,335.5,301.9,335.5z"/>
<path id="suteki_47_" class="dane1" d="M267.4,360.5c-0.1-6.2,1.6-12.3,3-16.2c-0.1-0.7-0.3-1.5-0.4-2.3c0,0-4.6,10-4.5,20.2
c0,0,2.5,4.2,4.9,3c0.7-0.3,1.3-0.9,1.9-1.7C269.9,364.6,267.4,360.5,267.4,360.5z"/>
<path id="suteki_46_" class="dane1" d="M284.9,353.3c-3.1-8.8-3.6-18.3-3.6-24.3c-0.5-1-1.1-2-1.7-3.1c0,0-1.7,16.3,3.3,30.7
c0,0,5.5,4.8,8.4,1.9c0.8-0.8,1.4-2,1.9-3.3C290.4,358,284.9,353.3,284.9,353.3z"/>
</g>
</g>
</svg>

jquery svg shift color animation

I'm trying to make an svg animation where the color of the svg slides to an other color. My goal is to make kind of a running light.
I'm not trying to fade the fill color of the whole svg as seen in a lot of examples.
Here is an example photo with a few frames of the animation. svg animation
I've tried a few different technics but couldn't find a good one.
This is how i did it with css keyframes:
$.keyframe.define([{
name: 'shift',
'0%': {'background-position':'0px'},
'2%': {'background-position':'6px'},
'4%': {'background-position':'12px'},
'6%': {'background-position':'18px'},
'8%': {'background-position':'24px'},
'10%': {'background-position':'30px'},
'12%': {'background-position':'36px'},
'14%': {'background-position':'42px'},
'16%': {'background-position':'48px'},
'18%': {'background-position':'54px'},
'20%': {'background-position':'60px'},
'22%': {'background-position':'66px'},
'24%': {'background-position':'72px'},
'26%': {'background-position':'78px'},
'28%': {'background-position':'84px'},
'30%': {'background-position':'90px'},
'32%': {'background-position':'96px'},
'34%': {'background-position':'102px'},
'36%': {'background-position':'108px'},
'38%': {'background-position':'114px'},
'40%': {'background-position':'120px'},
'42%': {'background-position':'126px'},
'44%': {'background-position':'132px'},
'46%': {'background-position':'138px'},
'48%': {'background-position':'144px'},
'50%': {'background-position':'150px'},
'52%': {'background-position':'156px'},
'54%': {'background-position':'162px'},
'56%': {'background-position':'168px'},
'58%': {'background-position':'174px'},
'60%': {'background-position':'180px'},
'62%': {'background-position':'186px'},
'64%': {'background-position':'192px'},
'66%': {'background-position':'198px'},
'68%': {'background-position':'204px'},
'70%': {'background-position':'210px'},
'72%': {'background-position':'216px'},
'74%': {'background-position':'222px'},
'76%': {'background-position':'228px'},
'78%': {'background-position':'234px'},
'80%': {'background-position':'240px'},
'82%': {'background-position':'246px'},
'84%': {'background-position':'252px'},
'86%': {'background-position':'258px'},
'88%': {'background-position':'264px'},
'90%': {'background-position':'270px'},
'92%': {'background-position':'276px'},
'94%': {'background-position':'282px'},
'96%': {'background-position':'288px'},
'98%': {'background-position':'294px'},
'100%': {'background-position':'300px'}
}]);
$('.ledbar').playKeyframe({
name: 'shift',
duration: "4s",
timingFunction: 'linear',
delay: 0,
direction: 'reverse',
fillMode: 'forwards',
});
The oranje part moves over the green. The svg was drawn so that every rectangle was just 6px further than the other one.
this didn't work becouse of the smooth transition between two keyframes. This made the animation flicker. Maybe if the animation was in steps it would work but i don't know how this works and i thing there has to be a better way.
So i'm wondering how i could liniear shift the color of the svg in to an other color. I've looked at svg masks etc. but couldn't figuer it out.
This is the svg file, maybe its useful:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg 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"
width="403.5px" height="13px" viewBox="0 0 403.5 13" enable-background="new 0 0 403.5 13" xml:space="preserve">
<g id="Button_2_-_Green">
</g>
<g>
<path fill="#80A993" d="M0.017,0L1.5,0.002L1.484,13H0L0.017,0z"/>
<path fill="#80A993" d="M6.017,0L7.5,0.002L7.484,13H6L6.017,0z"/>
<path fill="#80A993" d="M12.017,0L13.5,0.002L13.484,13H12L12.017,0z"/>
<path fill="#80A993" d="M18.017,0L19.5,0.002L19.484,13H18L18.017,0z"/>
<path fill="#80A993" d="M36.017,0L37.5,0.002L37.484,13H36L36.017,0z"/>
<path fill="#80A993" d="M42.017,0L43.5,0.002L43.484,13H42L42.017,0z"/>
<path fill="#80A993" d="M24.017,0L25.5,0.002L25.484,13H24L24.017,0z"/>
<path fill="#80A993" d="M30.017,0L31.5,0.002L31.484,13H30L30.017,0z"/>
<path fill="#80A993" d="M48.017,0L49.5,0.002L49.484,13H48L48.017,0z"/>
<path fill="#80A993" d="M54.017,0L55.5,0.002L55.484,13H54L54.017,0z"/>
<path fill="#80A993" d="M60.017,0L61.5,0.002L61.484,13H60L60.017,0z"/>
<path fill="#80A993" d="M66.017,0L67.5,0.002L67.484,13H66L66.017,0z"/>
<path fill="#80A993" d="M72.017,0L73.5,0.002L73.484,13H72L72.017,0z"/>
<path fill="#80A993" d="M78.017,0L79.5,0.002L79.484,13H78L78.017,0z"/>
<path fill="#80A993" d="M84.017,0L85.5,0.002L85.484,13H84L84.017,0z"/>
<path fill="#80A993" d="M90.017,0L91.5,0.002L91.484,13H90L90.017,0z"/>
<path fill="#80A993" d="M96.017,0L97.5,0.002L97.484,13H96L96.017,0z"/>
<path fill="#80A993" d="M102.017,0l1.483,0.002L103.484,13H102L102.017,0z"/>
<path fill="#80A993" d="M108.017,0l1.483,0.002L109.484,13H108L108.017,0z"/>
<path fill="#80A993" d="M114.017,0l1.483,0.002L115.484,13H114L114.017,0z"/>
<path fill="#80A993" d="M120.017,0l1.483,0.002L121.484,13H120L120.017,0z"/>
<path fill="#80A993" d="M126.017,0l1.483,0.002L127.484,13H126L126.017,0z"/>
<path fill="#80A993" d="M144.017,0l1.483,0.002L145.484,13H144L144.017,0z"/>
<path fill="#80A993" d="M150.017,0l1.483,0.002L151.484,13H150L150.017,0z"/>
<path fill="#80A993" d="M132.017,0l1.483,0.002L133.484,13H132L132.017,0z"/>
<path fill="#80A993" d="M138.017,0l1.483,0.002L139.484,13H138L138.017,0z"/>
<path fill="#80A993" d="M156.017,0l1.483,0.002L157.484,13H156L156.017,0z"/>
<path fill="#80A993" d="M162.017,0l1.483,0.002L163.484,13H162L162.017,0z"/>
<path fill="#80A993" d="M168.017,0l1.483,0.002L169.484,13H168L168.017,0z"/>
<path fill="#80A993" d="M174.017,0l1.483,0.002L175.484,13H174L174.017,0z"/>
<path fill="#80A993" d="M180.017,0l1.483,0.002L181.484,13H180L180.017,0z"/>
<path fill="#80A993" d="M186.017,0l1.483,0.002L187.484,13H186L186.017,0z"/>
<path fill="#80A993" d="M192.017,0l1.483,0.002L193.484,13H192L192.017,0z"/>
<path fill="#80A993" d="M198.017,0l1.483,0.002L199.484,13H198L198.017,0z"/>
<path fill="#80A993" d="M204.017,0l1.483,0.002L205.484,13H204L204.017,0z"/>
<path fill="#80A993" d="M210.017,0l1.483,0.002L211.484,13H210L210.017,0z"/>
<path fill="#80A993" d="M216.017,0l1.483,0.002L217.484,13H216L216.017,0z"/>
<path fill="#80A993" d="M222.017,0l1.483,0.002L223.484,13H222L222.017,0z"/>
<path fill="#80A993" d="M228.017,0l1.483,0.002L229.484,13H228L228.017,0z"/>
<path fill="#80A993" d="M234.017,0l1.483,0.002L235.484,13H234L234.017,0z"/>
<path fill="#80A993" d="M252.017,0l1.483,0.002L253.484,13H252L252.017,0z"/>
<path fill="#80A993" d="M258.017,0l1.483,0.002L259.484,13H258L258.017,0z"/>
<path fill="#80A993" d="M240.017,0l1.483,0.002L241.484,13H240L240.017,0z"/>
<path fill="#80A993" d="M246.017,0l1.483,0.002L247.484,13H246L246.017,0z"/>
<path fill="#80A993" d="M264.017,0l1.483,0.002L265.484,13H264L264.017,0z"/>
<path fill="#80A993" d="M270.017,0l1.483,0.002L271.484,13H270L270.017,0z"/>
<path fill="#80A993" d="M276.017,0l1.482,0.002L277.484,13H276L276.017,0z"/>
<path fill="#80A993" d="M282.017,0l1.482,0.002L283.484,13H282L282.017,0z"/>
<path fill="#80A993" d="M288.017,0l1.482,0.002L289.484,13H288L288.017,0z"/>
<path fill="#80A993" d="M294.017,0l1.482,0.002L295.484,13H294L294.017,0z"/>
<path fill="#80A993" d="M300.017,0l1.482,0.002L301.484,13H300L300.017,0z"/>
<path fill="#80A993" d="M306.017,0l1.482,0.002L307.484,13H306L306.017,0z"/>
<path fill="#80A993" d="M312.017,0l1.482,0.002L313.484,13H312L312.017,0z"/>
<path fill="#80A993" d="M318.017,0l1.482,0.002L319.484,13H318L318.017,0z"/>
<path fill="#80A993" d="M324.017,0l1.482,0.002L325.484,13H324L324.017,0z"/>
<path fill="#80A993" d="M330.017,0l1.482,0.002L331.484,13H330L330.017,0z"/>
<path fill="#80A993" d="M336.017,0l1.482,0.002L337.484,13H336L336.017,0z"/>
<path fill="#80A993" d="M342.017,0l1.482,0.002L343.484,13H342L342.017,0z"/>
<path fill="#80A993" d="M360.017,0l1.482,0.002L361.484,13H360L360.017,0z"/>
<path fill="#80A993" d="M366.017,0l1.482,0.002L367.484,13H366L366.017,0z"/>
<path fill="#80A993" d="M348.017,0l1.482,0.002L349.484,13H348L348.017,0z"/>
<path fill="#80A993" d="M354.017,0l1.482,0.002L355.484,13H354L354.017,0z"/>
<path fill="#80A993" d="M372.017,0l1.482,0.002L373.484,13H372L372.017,0z"/>
<path fill="#80A993" d="M378.017,0l1.482,0.002L379.484,13H378L378.017,0z"/>
<path fill="#80A993" d="M384.017,0l1.482,0.002L385.484,13H384L384.017,0z"/>
<path fill="#80A993" d="M390.017,0l1.482,0.002L391.484,13H390L390.017,0z"/>
<path fill="#80A993" d="M396.017,0l1.482,0.002L397.484,13H396L396.017,0z"/>
<path fill="#80A993" d="M402.017,0l1.482,0.002L403.484,13H402L402.017,0z"/>
</g>
</svg>

Here is one way to do it: with an animated linear gradient.
<svg 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"
width="403.5px" height="13px" viewBox="0 0 403.5 13" enable-background="new 0 0 403.5 13" xml:space="preserve">
<defs>
<linearGradient id="orange-grad" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="orange"/>
<stop offset="0" stop-color="orange">
<animate attributeName="offset" attributeType="XML"
begin="0s" dur="5s" fill="freeze" from="0" to="1" />
</stop>
<stop offset="0" stop-color="#80A993">
<animate attributeName="offset" attributeType="XML"
begin="0s" dur="5s" fill="freeze" from="0" to="1" />
</stop>
<stop offset="1" stop-color="#80A993"/>
</linearGradient>
</defs>
<g fill="url(#orange-grad)">
<path d="M0.017,0L1.5,0.002L1.484,13H0L0.017,0z"/>
<path d="M6.017,0L7.5,0.002L7.484,13H6L6.017,0z"/>
<path d="M12.017,0L13.5,0.002L13.484,13H12L12.017,0z"/>
<path d="M18.017,0L19.5,0.002L19.484,13H18L18.017,0z"/>
<path d="M36.017,0L37.5,0.002L37.484,13H36L36.017,0z"/>
<path d="M42.017,0L43.5,0.002L43.484,13H42L42.017,0z"/>
<path d="M24.017,0L25.5,0.002L25.484,13H24L24.017,0z"/>
<path d="M30.017,0L31.5,0.002L31.484,13H30L30.017,0z"/>
<path d="M48.017,0L49.5,0.002L49.484,13H48L48.017,0z"/>
<path d="M54.017,0L55.5,0.002L55.484,13H54L54.017,0z"/>
<path d="M60.017,0L61.5,0.002L61.484,13H60L60.017,0z"/>
<path d="M66.017,0L67.5,0.002L67.484,13H66L66.017,0z"/>
<path d="M72.017,0L73.5,0.002L73.484,13H72L72.017,0z"/>
<path d="M78.017,0L79.5,0.002L79.484,13H78L78.017,0z"/>
<path d="M84.017,0L85.5,0.002L85.484,13H84L84.017,0z"/>
<path d="M90.017,0L91.5,0.002L91.484,13H90L90.017,0z"/>
<path d="M96.017,0L97.5,0.002L97.484,13H96L96.017,0z"/>
<path d="M102.017,0l1.483,0.002L103.484,13H102L102.017,0z"/>
<path d="M108.017,0l1.483,0.002L109.484,13H108L108.017,0z"/>
<path d="M114.017,0l1.483,0.002L115.484,13H114L114.017,0z"/>
<path d="M120.017,0l1.483,0.002L121.484,13H120L120.017,0z"/>
<path d="M126.017,0l1.483,0.002L127.484,13H126L126.017,0z"/>
<path d="M144.017,0l1.483,0.002L145.484,13H144L144.017,0z"/>
<path d="M150.017,0l1.483,0.002L151.484,13H150L150.017,0z"/>
<path d="M132.017,0l1.483,0.002L133.484,13H132L132.017,0z"/>
<path d="M138.017,0l1.483,0.002L139.484,13H138L138.017,0z"/>
<path d="M156.017,0l1.483,0.002L157.484,13H156L156.017,0z"/>
<path d="M162.017,0l1.483,0.002L163.484,13H162L162.017,0z"/>
<path d="M168.017,0l1.483,0.002L169.484,13H168L168.017,0z"/>
<path d="M174.017,0l1.483,0.002L175.484,13H174L174.017,0z"/>
<path d="M180.017,0l1.483,0.002L181.484,13H180L180.017,0z"/>
<path d="M186.017,0l1.483,0.002L187.484,13H186L186.017,0z"/>
<path d="M192.017,0l1.483,0.002L193.484,13H192L192.017,0z"/>
<path d="M198.017,0l1.483,0.002L199.484,13H198L198.017,0z"/>
<path d="M204.017,0l1.483,0.002L205.484,13H204L204.017,0z"/>
<path d="M210.017,0l1.483,0.002L211.484,13H210L210.017,0z"/>
<path d="M216.017,0l1.483,0.002L217.484,13H216L216.017,0z"/>
<path d="M222.017,0l1.483,0.002L223.484,13H222L222.017,0z"/>
<path d="M228.017,0l1.483,0.002L229.484,13H228L228.017,0z"/>
<path d="M234.017,0l1.483,0.002L235.484,13H234L234.017,0z"/>
<path d="M252.017,0l1.483,0.002L253.484,13H252L252.017,0z"/>
<path d="M258.017,0l1.483,0.002L259.484,13H258L258.017,0z"/>
<path d="M240.017,0l1.483,0.002L241.484,13H240L240.017,0z"/>
<path d="M246.017,0l1.483,0.002L247.484,13H246L246.017,0z"/>
<path d="M264.017,0l1.483,0.002L265.484,13H264L264.017,0z"/>
<path d="M270.017,0l1.483,0.002L271.484,13H270L270.017,0z"/>
<path d="M276.017,0l1.482,0.002L277.484,13H276L276.017,0z"/>
<path d="M282.017,0l1.482,0.002L283.484,13H282L282.017,0z"/>
<path d="M288.017,0l1.482,0.002L289.484,13H288L288.017,0z"/>
<path d="M294.017,0l1.482,0.002L295.484,13H294L294.017,0z"/>
<path d="M300.017,0l1.482,0.002L301.484,13H300L300.017,0z"/>
<path d="M306.017,0l1.482,0.002L307.484,13H306L306.017,0z"/>
<path d="M312.017,0l1.482,0.002L313.484,13H312L312.017,0z"/>
<path d="M318.017,0l1.482,0.002L319.484,13H318L318.017,0z"/>
<path d="M324.017,0l1.482,0.002L325.484,13H324L324.017,0z"/>
<path d="M330.017,0l1.482,0.002L331.484,13H330L330.017,0z"/>
<path d="M336.017,0l1.482,0.002L337.484,13H336L336.017,0z"/>
<path d="M342.017,0l1.482,0.002L343.484,13H342L342.017,0z"/>
<path d="M360.017,0l1.482,0.002L361.484,13H360L360.017,0z"/>
<path d="M366.017,0l1.482,0.002L367.484,13H366L366.017,0z"/>
<path d="M348.017,0l1.482,0.002L349.484,13H348L348.017,0z"/>
<path d="M354.017,0l1.482,0.002L355.484,13H354L354.017,0z"/>
<path d="M372.017,0l1.482,0.002L373.484,13H372L372.017,0z"/>
<path d="M378.017,0l1.482,0.002L379.484,13H378L378.017,0z"/>
<path d="M384.017,0l1.482,0.002L385.484,13H384L384.017,0z"/>
<path d="M390.017,0l1.482,0.002L391.484,13H390L390.017,0z"/>
<path d="M396.017,0l1.482,0.002L397.484,13H396L396.017,0z"/>
<path d="M402.017,0l1.482,0.002L403.484,13H402L402.017,0z"/>
</g>
</svg>
Update: How to manually trigger and reverse direction
Here I've used a different way of creating the graph. This variant uses a clipping path and slides an orange rect back and forth behind the clip. As requested by OP, I have added the ability to trigger the animation and switch directions by mousing over a couple of buttons.
This example uses vanilla Javascript and a timeout function for basic animation. If you wanted, you could switch to using a window.requestAnimationFrame() approach if there is a lot going on on your page and the animation doesn't run smoothly.
var graphPosition = 0;
var graphStep = 6;
var graphRunning = false;
var orangeRect = document.getElementById("orange");
document.getElementById("forwards").addEventListener("mouseenter", function() {
graphStep = 6;
startGraphRunning();
});
document.getElementById("backwards").addEventListener("mouseenter", function() {
graphStep = -6;
startGraphRunning();
});
function startGraphRunning()
{
// If already running, do nothing
if (graphRunning) return;
graphRunning = true;
// Perform the first step in the animation
animationStep();
}
function animationStep()
{
// Calculate new position of orang rectangle
var newPos = graphPosition += graphStep;
if (newPos < 0 || newPos > 408)
{
// Stop animation if we have reach min or max position
graphRunning = false;
}
else
{
// Update x position of orange rect
graphPosition = newPos;
// We want right hand edge of rectangle to be at "graphPosition",
// so we position rect at (graphPosition - rectangle-width)
orangeRect.setAttribute("x", graphPosition - orangeRect.width.baseVal.value);
}
// If animation is still running, call this function again in 50mS
if (graphRunning)
setTimeout(animationStep, 50);
}
div {
display: inline-block;
padding: 10px;
background-color: #eee;
border: solid 1px black;
margin: 20px 20px 0 0;
}
<svg 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"
width="403.5px" height="13px" viewBox="0 0 403.5 13" enable-background="new 0 0 403.5 13" xml:space="preserve">
<defs>
<clipPath id="graph">
<path d="M0.017,0L1.5,0.002L1.484,13H0L0.017,0z"/>
<path d="M6.017,0L7.5,0.002L7.484,13H6L6.017,0z"/>
<path d="M12.017,0L13.5,0.002L13.484,13H12L12.017,0z"/>
<path d="M18.017,0L19.5,0.002L19.484,13H18L18.017,0z"/>
<path d="M36.017,0L37.5,0.002L37.484,13H36L36.017,0z"/>
<path d="M42.017,0L43.5,0.002L43.484,13H42L42.017,0z"/>
<path d="M24.017,0L25.5,0.002L25.484,13H24L24.017,0z"/>
<path d="M30.017,0L31.5,0.002L31.484,13H30L30.017,0z"/>
<path d="M48.017,0L49.5,0.002L49.484,13H48L48.017,0z"/>
<path d="M54.017,0L55.5,0.002L55.484,13H54L54.017,0z"/>
<path d="M60.017,0L61.5,0.002L61.484,13H60L60.017,0z"/>
<path d="M66.017,0L67.5,0.002L67.484,13H66L66.017,0z"/>
<path d="M72.017,0L73.5,0.002L73.484,13H72L72.017,0z"/>
<path d="M78.017,0L79.5,0.002L79.484,13H78L78.017,0z"/>
<path d="M84.017,0L85.5,0.002L85.484,13H84L84.017,0z"/>
<path d="M90.017,0L91.5,0.002L91.484,13H90L90.017,0z"/>
<path d="M96.017,0L97.5,0.002L97.484,13H96L96.017,0z"/>
<path d="M102.017,0l1.483,0.002L103.484,13H102L102.017,0z"/>
<path d="M108.017,0l1.483,0.002L109.484,13H108L108.017,0z"/>
<path d="M114.017,0l1.483,0.002L115.484,13H114L114.017,0z"/>
<path d="M120.017,0l1.483,0.002L121.484,13H120L120.017,0z"/>
<path d="M126.017,0l1.483,0.002L127.484,13H126L126.017,0z"/>
<path d="M144.017,0l1.483,0.002L145.484,13H144L144.017,0z"/>
<path d="M150.017,0l1.483,0.002L151.484,13H150L150.017,0z"/>
<path d="M132.017,0l1.483,0.002L133.484,13H132L132.017,0z"/>
<path d="M138.017,0l1.483,0.002L139.484,13H138L138.017,0z"/>
<path d="M156.017,0l1.483,0.002L157.484,13H156L156.017,0z"/>
<path d="M162.017,0l1.483,0.002L163.484,13H162L162.017,0z"/>
<path d="M168.017,0l1.483,0.002L169.484,13H168L168.017,0z"/>
<path d="M174.017,0l1.483,0.002L175.484,13H174L174.017,0z"/>
<path d="M180.017,0l1.483,0.002L181.484,13H180L180.017,0z"/>
<path d="M186.017,0l1.483,0.002L187.484,13H186L186.017,0z"/>
<path d="M192.017,0l1.483,0.002L193.484,13H192L192.017,0z"/>
<path d="M198.017,0l1.483,0.002L199.484,13H198L198.017,0z"/>
<path d="M204.017,0l1.483,0.002L205.484,13H204L204.017,0z"/>
<path d="M210.017,0l1.483,0.002L211.484,13H210L210.017,0z"/>
<path d="M216.017,0l1.483,0.002L217.484,13H216L216.017,0z"/>
<path d="M222.017,0l1.483,0.002L223.484,13H222L222.017,0z"/>
<path d="M228.017,0l1.483,0.002L229.484,13H228L228.017,0z"/>
<path d="M234.017,0l1.483,0.002L235.484,13H234L234.017,0z"/>
<path d="M252.017,0l1.483,0.002L253.484,13H252L252.017,0z"/>
<path d="M258.017,0l1.483,0.002L259.484,13H258L258.017,0z"/>
<path d="M240.017,0l1.483,0.002L241.484,13H240L240.017,0z"/>
<path d="M246.017,0l1.483,0.002L247.484,13H246L246.017,0z"/>
<path d="M264.017,0l1.483,0.002L265.484,13H264L264.017,0z"/>
<path d="M270.017,0l1.483,0.002L271.484,13H270L270.017,0z"/>
<path d="M276.017,0l1.482,0.002L277.484,13H276L276.017,0z"/>
<path d="M282.017,0l1.482,0.002L283.484,13H282L282.017,0z"/>
<path d="M288.017,0l1.482,0.002L289.484,13H288L288.017,0z"/>
<path d="M294.017,0l1.482,0.002L295.484,13H294L294.017,0z"/>
<path d="M300.017,0l1.482,0.002L301.484,13H300L300.017,0z"/>
<path d="M306.017,0l1.482,0.002L307.484,13H306L306.017,0z"/>
<path d="M312.017,0l1.482,0.002L313.484,13H312L312.017,0z"/>
<path d="M318.017,0l1.482,0.002L319.484,13H318L318.017,0z"/>
<path d="M324.017,0l1.482,0.002L325.484,13H324L324.017,0z"/>
<path d="M330.017,0l1.482,0.002L331.484,13H330L330.017,0z"/>
<path d="M336.017,0l1.482,0.002L337.484,13H336L336.017,0z"/>
<path d="M342.017,0l1.482,0.002L343.484,13H342L342.017,0z"/>
<path d="M360.017,0l1.482,0.002L361.484,13H360L360.017,0z"/>
<path d="M366.017,0l1.482,0.002L367.484,13H366L366.017,0z"/>
<path d="M348.017,0l1.482,0.002L349.484,13H348L348.017,0z"/>
<path d="M354.017,0l1.482,0.002L355.484,13H354L354.017,0z"/>
<path d="M372.017,0l1.482,0.002L373.484,13H372L372.017,0z"/>
<path d="M378.017,0l1.482,0.002L379.484,13H378L378.017,0z"/>
<path d="M384.017,0l1.482,0.002L385.484,13H384L384.017,0z"/>
<path d="M390.017,0l1.482,0.002L391.484,13H390L390.017,0z"/>
<path d="M396.017,0l1.482,0.002L397.484,13H396L396.017,0z"/>
<path d="M402.017,0l1.482,0.002L403.484,13H402L402.017,0z"/>
</mask>
</defs>
<g clip-path="url(#graph)">
<rect x="0" y="0" width="408" height="13" fill="green"/>
<rect x="-408" y="0" width="408" height="13" fill="orange" id="orange"/>
</g>
</svg>
<br />
<div id="forwards">Forwards</div>
<div id="backwards">Backwards</div>

Categories

Resources