Is there a way to run an svg on click? - javascript

<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="450px" height="450px" viewBox="0 0 450 450" style="enable-background:new 0 0 450 450;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:none;stroke:#000000;stroke-miterlimit:10;}
</style>
<rect id="1" x="299.8" y="300.5" class="st0" width="149.5" height="150.5"/>
<rect id="2" x="150.2" y="300.5" class="st0" width="149.5" height="150.5"/>
<rect id="3" y="300.5" class="st0" width="149.5" height="150.5"/>
<rect id="4" x="299.8" y="150.5" class="st0" width="149.5" height="150.5"/>
<rect id="5" x="150.2" y="150.5" class="st0" width="149.5" height="150.5"/>
<rect id="6" y="150.5" class="st0" width="149.5" height="150.5"/>
<rect id="7" x="299.8" class="st0" width="149.5" height="150.5"/>
<rect id="8" x="150.2" class="st0" width="149.5" height="150.5"/>
<rect id="9" class="st0" width="149.5" height="150.5"/>
<line class="path" fill="none" stroke="#000000" x1="149.5" y1="0" x2="149.5" y2="450"/>
<line class="path" fill="none" stroke="#000000" x1="299.5" y1="450" x2="299.5" y2="0"/>
<line class="path" fill="none" stroke="#000000" x1="0" y1="150.5" x2="450" y2="150.5"/>
<line class="path" fill="none" stroke="#000000" x1="450" y1="300.5" x2="0" y2="300.5"/>
</svg>
I have this svg which is a tic tac toe board. I want it to load(run the animation of the line tags) AFTER the user enters the number of players and player names. Is there a way to do that? the rect elements are what I will use to target areas while playing the game.
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}


Like so perhaps i.e. set the class on click?
function run() {
var lines = document.getElementsByTagName("line");
for (var i = 0; i < lines.length; i++) {
lines[i].setAttribute("class", "path");
}
}
line {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
.path {
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<button onclick="run()">click me</button>
<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="450px" height="450px" viewBox="0 0 450 450" style="enable-background:new 0 0 450 450;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:none;stroke:#000000;stroke-miterlimit:10;}
</style>
<rect id="1" x="299.8" y="300.5" class="st0" width="149.5" height="150.5"/>
<rect id="2" x="150.2" y="300.5" class="st0" width="149.5" height="150.5"/>
<rect id="3" y="300.5" class="st0" width="149.5" height="150.5"/>
<rect id="4" x="299.8" y="150.5" class="st0" width="149.5" height="150.5"/>
<rect id="5" x="150.2" y="150.5" class="st0" width="149.5" height="150.5"/>
<rect id="6" y="150.5" class="st0" width="149.5" height="150.5"/>
<rect id="7" x="299.8" class="st0" width="149.5" height="150.5"/>
<rect id="8" x="150.2" class="st0" width="149.5" height="150.5"/>
<rect id="9" class="st0" width="149.5" height="150.5"/>
<line fill="none" stroke="#000000" x1="149.5" y1="0" x2="149.5" y2="450"/>
<line fill="none" stroke="#000000" x1="299.5" y1="450" x2="299.5" y2="0"/>
<line fill="none" stroke="#000000" x1="0" y1="150.5" x2="450" y2="150.5"/>
<line fill="none" stroke="#000000" x1="450" y1="300.5" x2="0" y2="300.5"/>
</svg>

Related

Svg which uses greensock to convert it only with css use

I'm trying to understand if it is how it can be possible to convert the animations of the following svg that greensock uses, using only the css code.
In the following example, I don't know why, only the animation of the browser and scrollbar seems to work, which scroll.
That of the terminal that opens and the code that you write on your own doesn't seem to work.
So the question is would it be possible to convert the following example which uses animations only using css.
Can you give me some suggestions?
(function() {
let illustration = document.querySelector('.Illustration');
if (!illustration) {
return;
}
const computer = gsap.timeline({
scrollTrigger: {
trigger: '.Illustration',
toggleActions: 'play none none none',
end: '+=10' // end after scrolling 500px beyond the start
}
});
computer
.to(
'#cursor',
{
repeat: 20,
keyframes: [
{
opacity: 0,
duration: 0.01,
delay: 0.4
},
{
opacity: 1,
duration: 0.01,
delay: 0.4
}
]
},
0
)
.from(
'.line',
{
scaleX: 0,
ease: Sine.easeOut,
stagger: {
duration: 3,
amount: 3
}
},
0
)
.to(
'#website',
{
ease: Sine.easeInOut,
yPercent: -60,
duration: 4
},
1
)
.to(
'#scrollbar',
{
ease: Sine.easeInOut,
yPercent: 260,
duration: 4
},
1
)
.to(
'#iterm',
{
opacity: 1,
delay: -0.1,
duration: 0.01
},
2
)
.from(
'#iterm',
{
ease: Elastic.easeOut.config(0.17, 0.2),
transformOrigin: '50% 50%',
y: 60,
x: -20,
duration: 1,
scale: 0
},
2
)
.fromTo(
'.steam',
{
opacity: 1,
drawSVG: '0%'
},
{
drawSVG: '100%',
duration: 3,
stagger: {
each: 0.5
}
},
2
)
.to(
'.steam',
{
opacity: 0,
duration: 4,
stagger: {
each: 0.5
}
},
3
);
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js"></script>
<script src="https://pastebin.com/raw/ywciu18p"></script>
<script src="https://pastebin.com/raw/u7GLGbfu"></script>
<svg
xmlns="http://www.w3.org/2000/svg" class="Illustration Hero__svg" preserveAspectRatio="xMinYMin meet" viewBox="120 200 300 288" width="300px" height="288px">
<defs>
<clipPath id="clippy">
<rect x="133.98" y="248.2" width="52.38" height="81.84" fill="none"></rect>
</clipPath>
<clipPath id="screen">
<rect x="128.39" y="240.73" width="184.29" height="95.74" fill="none"></rect>
</clipPath>
</defs>
<g style="isolation:isolate">
<g id="_1" data-name="1">
<rect id="shelf" x="10.16" y="266.81" width="99.83" height="4.23" fill="#404040"></rect>
<rect id="desk" x="37.83" y="380.3" width="282" height="10" rx="5" fill="#404040"></rect>
<g id="coffee">
<path d="M90.8 362a.87.87 0 01-1.74 0 2.14 2.14 0 00-.27-.89 3.33 3.33 0 00-.91-1.11 1.87 1.87 0 00-1.16-.41 1.79 1.79 0 00-.72.2l-.16.09a2.23 2.23 0 00-1 1.61 4.56 4.56 0 00.58 2.75c.08.16.18.34.29.52a17.28 17.28 0 002.71 3c1.79 1.72 3.65 3.51 4.2 6a.87.87 0 11-1.69.38c-.44-1.95-2.11-3.55-3.71-5.1a18.07 18.07 0 01-3-3.38c-.12-.2-.24-.41-.35-.63a6.31 6.31 0 01-.75-3.82 4 4 0 011.85-2.83l.28-.15a3.5 3.5 0 011.46-.39 3.6 3.6 0 012.25.76 5 5 0 011.41 1.71 4 4 0 01.43 1.69z" fill="#cc7d96"></path>
<path d="M107.54 356.89c.08 4.69-1.07 19.42-4.84 23.22h-8.08c-3.77-3.8-4.92-18.53-4.84-23.22z" fill="#dd859c" fill-rule="evenodd"></path>
<path opacity="0" class="steam" d="M99.48,350.34c-.56-.56-3-3.52,0-6.2s1.93-3.76.11-6.19" fill="none" stroke="#d1d1d1" stroke-linecap="round" stroke-miterlimit="10" style="opacity: 1; stroke-dashoffset: 16.4006; stroke-dasharray: 0px, 999999px;"></path>
<path opacity="0" class="steam" d="M103.68,354.83c-.56-.56-3-3.52,0-6.19s1.93-3.76.11-6.2" fill="none" stroke="#d1d1d1" stroke-linecap="round" stroke-miterlimit="10" style="opacity: 1; stroke-dashoffset: 16.4011; stroke-dasharray: 0px, 999999px;"></path>
<path opacity="0" class="steam" d="M93.57,354.83c-.57-.56-3-3.52,0-6.19s1.92-3.76.1-6.2" fill="none" stroke="#d1d1d1" stroke-linecap="round" stroke-miterlimit="10" style="opacity: 1; stroke-dashoffset: 15.4049; stroke-dasharray: 0px, 999999px;"></path>
</g>
<g id="pc">
<polygon points="238.13 377.72 235.66 361.98 205.21 361.98 202.74 377.72 238.13 377.72" fill="#d2cfd6"></polygon>
<path d="M124.59 363.8a3.31 3.31 0 01-3.3-3.31v-18.76h198.29v18.76a3.32 3.32 0 01-3.31 3.31z" fill="#fff"></path>
<path d="M319.33 342v18.51a3.06 3.06 0 01-3.06 3.06H124.59a3.06 3.06 0 01-3-3.06V342h197.74m.5-.5H121v19a3.56 3.56 0 003.55 3.56h191.72a3.56 3.56 0 003.56-3.56v-19z" fill="#404040"></path>
<path d="M314.36 234.24H126.51a5.45 5.45 0 00-5.47 5.43v103.2h198.79v-103.2a5.45 5.45 0 00-5.47-5.43z" fill="#404040"></path>
<rect x="128.39" y="240.73" width="184.29" height="95.74" fill="#e3d1e5"></rect>
<rect x="188.3" y="377.72" width="64.27" height="2.36" fill="#eaeaea"></rect>
<ellipse cx="220.43" cy="353.63" rx="3.84" ry="3.81" fill="#333"></ellipse>
<g clip-path="url(#screen)">
<g id="vs-code">
<rect x="193.2" y="240.73" width="119.55" height="95.74" fill="#565266"></rect>
<rect x="193.2" y="240.73" width="119.55" height="6.45" fill="#b0baea"></rect>
<ellipse cx="198.98" cy="243.95" rx="1.4" ry="1.38" fill="#e84d4d"></ellipse>
<ellipse cx="204.19" cy="243.95" rx="1.4" ry="1.38" fill="#f2dd77"></ellipse>
<ellipse cx="209.14" cy="243.95" rx="1.4" ry="1.38" fill="#4eb785"></ellipse>
<g fill="#706d84">
<path d="M200.08 252.61c1.17-.07 1.49-.16 1.49-.37s-.33-.43-1.24-.55v-.34l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.8c.83.18 1.15.51 1.15.9 0 .6-.67 1.05-2.21 1.13zM203.13 253.24l-.07-.61c1-.7 1.5-1.16 1.5-1.61s-.32-.5-1.4-.53l.07-.72c1.63 0 2.11.46 2.11 1s-.5 1.14-1.32 1.76h1.39v.67zM200.08 259.26c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54V258l1.11-.87h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM203.13 259.89l-.07-.61c1-.71 1.5-1.16 1.5-1.61s-.32-.5-1.4-.53l.07-.73c1.63 0 2.11.47 2.11 1s-.5 1.15-1.32 1.77h1.39v.67zM200.08 265.91c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54v-.34l1.11-.87h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM205.23 266v.59h-.73V266h-1.44a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.13l.73-.08v1.16h.37l-.07.67zM200.08 272.56c1.17-.08 1.49-.17 1.49-.38s-.33-.43-1.24-.54v-.35l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.81c.83.17 1.15.51 1.15.89 0 .6-.67 1.06-2.21 1.13zM203.17 273.27v-.72c1.17-.09 1.53-.2 1.53-.49s-.39-.42-1.44-.54l.11-1.77h2l-.06.69H204v.59c1.11.17 1.44.56 1.44 1-.04.63-.7 1.15-2.27 1.24zM200.08 279.2c1.17-.07 1.49-.16 1.49-.37s-.33-.43-1.24-.55v-.34l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.81c.83.17 1.15.51 1.15.89 0 .6-.67 1.05-2.21 1.13zM203 278.55c0-1 .56-1.73 1.83-2.27l.32.65c-.84.31-1.19.61-1.33 1 .78-.45 1.67-.08 1.67.8a1.25 1.25 0 11-2.49-.17zm1.76.23c0-.48-.41-.67-1-.4v.09c0 .59.25.83.56.83s.44-.17.44-.52zM200.08 285.85c1.17-.07 1.49-.16 1.49-.37s-.33-.43-1.24-.55v-.34l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.8c.83.18 1.15.51 1.15.9 0 .6-.67 1.05-2.21 1.13zM203.39 286.45a13.46 13.46 0 011.31-2.67h-1.6l.06-.7h2.33v.68a14.72 14.72 0 00-1.3 2.8zM200.08 292.5c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54v-.34l1.11-.87h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM203 292.33a.92.92 0 00.05-1.74c0-.48.42-1 1.22-1 .63 0 1.13.33 1.13.84a1 1 0 01-.61.86c.36.21.68.47.68.89s-.49 1-1.3 1-1.17-.32-1.17-.85zm1.71 0c0-.25-.32-.44-.68-.64a.67.67 0 00-.29.52c0 .25.15.44.5.44s.48-.17.48-.35zm-.32-1.21a.63.63 0 00.27-.48c0-.23-.12-.4-.44-.4s-.42.14-.42.29.28.39.6.56zM200.08 299.15c1.17-.07 1.49-.17 1.49-.38s-.33-.43-1.24-.54v-.35l1.11-.86h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .6-.67 1.06-2.21 1.14zM203.33 299.25c.84-.32 1.19-.61 1.33-1-.78.44-1.67.08-1.67-.8a1.25 1.25 0 112.49.17c0 1-.56 1.73-1.83 2.27zm1.41-1.45v-.09c0-.59-.25-.83-.56-.83s-.46.17-.46.51c0 .49.41.67 1.02.41zM202.16 305.84v.59h-.73v-.59H200a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.36l-.06.67zM202.94 304.77c0-1.11.51-1.85 1.34-1.85s1.26.65 1.26 1.73-.51 1.85-1.35 1.85-1.25-.65-1.25-1.73zm.75-.07l1.05-.54c-.08-.38-.25-.61-.51-.61s-.54.38-.54 1.08zm1.1.09l-1 .53c.08.37.24.59.5.59s.5-.42.5-1.12zM202.16 312.49v.58h-.73v-.58H200a11.47 11.47 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.36l-.06.67zM203.09 313.07v-.65h.91v-1.76h-.81v-.57l.81-.09v-.41l.76-.06v2.88h.82l-.06.65zM202.16 319.13v.59h-.73v-.59H200a11.44 11.44 0 01.33-2.87l.84.05-.55 2.15h.82v-1.07l.73-.08v1.15h.36l-.06.67zM203.13 319.72l-.07-.61c1-.71 1.5-1.16 1.5-1.61s-.32-.5-1.4-.53l.07-.73c1.63 0 2.11.47 2.11 1.05s-.5 1.14-1.32 1.76h1.39v.67zM202.16 325.78v.59h-.73v-.59H200a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82V324l.73-.07v1.15h.36l-.06.67zM203.15 325.74c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54v-.34l1.11-.87h-1.3v-.67h2l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM202.16 332.43v.57h-.73v-.59H200a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.36l-.06.67zM205.23 332.43v.57h-.73v-.59h-1.44a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.37l-.07.67z"></path>
</g>
<g id="code">
<rect class="line" data-name="line" x="210.54" y="250.33" width="70.96" height="3.07" fill="#a3848d" opacity=".39" data-svg-origin="210.5399932861328 250.3300018310547" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 150.06; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="256.92" width="75.56" height="3.07" fill="#a58492" opacity=".39" data-svg-origin="210.5399932861328 256.9200134277344" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 159.26; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="263.57" width="61.58" height="3.07" fill="#a284a3" opacity=".39" data-svg-origin="210.5399932861328 263.57000732421875" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 131.3; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="270.28" width="52.68" height="3.07" fill="#9084a0" opacity=".39" data-svg-origin="210.5399932861328 270.2799987792969" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 113.5; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="276.86" width="43.68" height="3.07" fill="#83859e" opacity=".39" data-svg-origin="210.5399932861328 276.8599853515625" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 95.5; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="283.56" width="73.08" height="3.07" fill="#83929b" opacity=".39" data-svg-origin="210.5399932861328 283.55999755859375" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 154.3; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="290.42" width="85.72" height="3.07" fill="#829995" opacity=".39" data-svg-origin="210.5399932861328 290.4200134277344" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 179.58; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="296.86" width="71.54" height="3.07" fill="#84998b" opacity=".39" data-svg-origin="210.5399932861328 296.8599853515625" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 151.22; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="303.51" width="67.52" height="3.07" fill="#899985" opacity=".39" data-svg-origin="210.5399932861328 303.510009765625" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 143.18; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="310.1" width="32.1" height="3.07" fill="#979987" opacity=".39" data-svg-origin="210.5399932861328 310.1000061035156" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 72.34; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="316.75" width="93.48" height="3.07" fill="#999488" opacity=".39" data-svg-origin="210.5399932861328 316.75" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 195.1; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="323.4" width="67.52" height="3.07" fill="#998e8a" opacity=".39" data-svg-origin="210.5399932861328 323.3999938964844" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 143.18; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.42" y="330.05" width="50.03" height="3.07" fill="#998c8c" opacity=".39" data-svg-origin="210.4199981689453 330.04998779296875" transform="matrix(0,0,0,1,210.42,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 108.2; stroke-dasharray: 0px, 999999px;"></rect>
</g>
</g>
<g id="iterm" opacity="0" data-svg-origin="283.99497985839844 311.64500427246094" transform="matrix(0,0,0,0,263.99498,371.645)" style="transform-origin: 0px 0px;">
<rect x="259.67" y="294.33" width="48.74" height="38.57" fill="#333"></rect>
<path d="M260.33 290.39h47.22a.86.86 0 01.86.86v4.38h-48.83v-4.49a.75.75 0 01.75-.75z" fill="#d3d3d3"></path>
<circle cx="262.39" cy="293.28" fill="#e84d4d" r="1.04"></circle>
<circle cx="266.28" cy="293.28" fill="#f2dd77" r="1.04"></circle>
<circle cx="269.99" cy="293.28" fill="#4eb785" r="1.04"></circle>
<path d="M264.11 303.17a.44.44 0 01-.29-.11.37.37 0 010-.56l1.36-1.28-1.36-1.29a.36.36 0 010-.55.41.41 0 01.58 0l1.66 1.56a.36.36 0 01.12.28.36.36 0 01-.12.27l-1.66 1.57a.46.46 0 01-.29.11z" fill="#83e5ab"></path>
<path id="cursor" d="M269.33 302.78a.4.4 0 00-.41-.39h-2.42a.39.39 0 100 .78h2.42a.4.4 0 00.41-.39z" fill="#83e5ab"></path>
</g>
<g class="webpage" clip-path="url(#clippy)">
<g id="website">
<rect x="133.88" y="243.41" width="52.47" height="242.13" rx="3.57" fill="#f0f0f2"></rect>
<line x1="141.67" y1="256.81" x2="174.02" y2="256.81" fill="none" stroke="#dd859c" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"></line>
<line x1="141.67" y1="262.1" x2="179.77" y2="262.1" fill="none" stroke="#dd859c" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"></line>
<line x1="141.67" y1="267.4" x2="174.02" y2="267.4" fill="none" stroke="#dd859c" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"></line>
<rect x="139.83" y="275.67" width="40.59" height="28.15" rx="3.22" fill="#f2c5c2"></rect>
<path d="M154.57 284.27a5.58 5.58 0 11-5.58-5.35 5.46 5.46 0 015.58 5.35z" fill="#fff" opacity=".48" style="mix-blend-mode:overlay"></path>
<line x1="144.8" y1="299.31" x2="161.56" y2="299.31" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<line x1="144.8" y1="294.69" x2="169.32" y2="294.69" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<g>
<rect x="139.83" y="308.41" width="37.69" height="49.32" rx="3.34" fill="#bdc0f4"></rect>
<line x1="146.12" y1="333.39" x2="157.69" y2="333.39" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="328.77" x2="163.05" y2="328.77" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="323.91" x2="168.46" y2="323.91" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="318.62" x2="172.42" y2="318.62" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="313.32" x2="168.46" y2="313.32" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
</g>
<g>
<rect x="139.83" y="363.82" width="40.59" height="58.46" rx="3.22" fill="#c2e7ef"></rect>
<line x1="144.98" y1="414.13" x2="158.87" y2="414.13" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="144.85" y1="410.5" x2="163.18" y2="410.5" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="144.62" y1="406.69" x2="166.2" y2="406.69" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="144.68" y1="402.92" x2="164.8" y2="402.92" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<line x1="144.75" y1="399.16" x2="158.5" y2="399.16" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<rect x="144.8" y="368.54" width="29.22" height="23.21" rx="6.86" fill="#fff" opacity=".48" style="mix-blend-mode:overlay"></rect>
</g>
<g>
<rect x="140.38" y="433.67" width="39.82" height="40.46" rx="3.34" fill="#d0b6d1"></rect>
<line x1="147.03" y1="467.66" x2="170.62" y2="467.66" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="463.31" x2="174.81" y2="463.31" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="458.97" x2="170.62" y2="458.97" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="454.16" x2="159.25" y2="454.16" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="450.37" x2="164.91" y2="450.37" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="446.39" x2="170.62" y2="446.39" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="442.04" x2="174.81" y2="442.04" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="437.7" x2="170.62" y2="437.7" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
</g>
</g>
</g>
</g>
<rect x="133.98" y="243.95" width="52.38" height="4.25" fill="#ddd"></rect>
<ellipse cx="136.91" cy="246.08" rx=".93" ry=".92" fill="#afafaf"></ellipse>
<ellipse cx="140.38" cy="246.08" rx=".93" ry=".92" fill="#eaeaea"></ellipse>
<ellipse cx="143.69" cy="246.08" rx=".93" ry=".92" fill="#afafaf"></ellipse>
<rect x="133.88" y="330.05" width="52.47" height="2.85" fill="#eaeaea"></rect>
<rect x="182.52" y="248.2" width="3.84" height="81.84" fill="#fff"></rect>
<rect id="scrollbar" x="183.24" y="249.77" width="2.4" height="22.21" rx="1.02" fill="#ddd"></rect>
</g>
</g>
</g>
</svg>

Javascript interfering with 2nd SVG line animation

Link to example: http://bss.com/RK/full3.html -- I want the word MEDIA to STAY on top of the background image after it writes in. Can anyone help me with that? Can I use a div within another div that is using javascript that is interfering with what I want to happen with the interior div.
I am sure this is an easy question for SOers. I've gotten very far but now just spinning my wheels and just can't figure this last bit. I saw this post CSS Animation property stays after animating because I used some from it and it is very close to working for me, however, I have this #box div inside another div that has js applied to it saying
$ (document).ready (function() {
setTimeout (function(){
$("div.center-div").fadeOut(1200); {
$("div.center-div").remove(1200);
};
},5500);
});
and the fadeOut and remove interferes with the second div. I have this (.center-div) div with an svg that fades in then out completely. There is a background image that stays after the fade.
.st1{fill:none;stroke:#FCFAFA;stroke-width:3;stroke-linecap:round;stroke-
linejoin:round;stroke-miterlimit:10;stroke-dasharray:2000;stroke-dashoffset:
2000;animation-delay:4.5s;animation-timing-function: ease-in forwards;
} /*media word */
I think I need another div for the .st1 content (word media) to fade in and then STAY but can't get that to work. I want the word MEDIA to stay after it comes in. But another div just renders below the center-div.
Have used z-index to no avail. I've tried making a class instead of id, I've tried nesting them as mentioned -- what can I do to get this "media" svg line animation element to come in and STAY, when the enveloping div has javascript to fade out and remove? Thank you. I hope someone can help me as I really need to move on to other things.

Firstly, you are doing a .remove() of the <div> that contains the SVG. So you obviously can't do that.
What you need to do instead is just fade out the elements of the SVG that you want to hide.
#keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
#line, #tree_2, #leaves, #background {
animation: fadeout 1s linear forwards;
animation-delay: 5.5s;
}
Since you want to fade out the black background also. You'll need to remove the background color of that <div>, and instead add a black rectangle to the SVG. Then you can fade that out also.
<g id="background">
<rect width="100%" height="100%" fill="black"/>
</g>
Updated example:
<div class="wrapper">
<div class="center-div">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="893px"
height="332.7px" viewBox="0 0 893 332.7" style="enable-background:new 0 0 893 332.7;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.st0{fill:#fcfafa;stroke:none;stroke-miterlimit:10;stroke-width:1; stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation-delay:2.5s; /* PERFECT! */
animation-timing-function: ease-in;
} /*WHITE TINY LEAVES */
.st1{fill:none;stroke:#FCFAFA;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation-delay:4.5s;
animation-timing-function: ease-in forwards;
} /*media word */
.st2{fill:none;stroke:#FCFAFA;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10; stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation-delay:5.6s;
animation-timing-function: ease-in forwards;; } /* dot white*/
.st3{fill:none;stroke:#89CB6A;stroke-width:4;stroke-miterlimit:10;} /* the green line */
/* .st4{fill:none;stroke:#89CB6A;stroke-width:8;stroke-miterlimit:10;} cant see difference-tiny amount of leaves I guess */
.st5{fill:none;stroke:#89CB6A;stroke-width:2;stroke-miterlimit:10;stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation-delay:2.5s; /* PERFECT! */
animation-timing-function: ease-in;} /* reg leaves */
]]>
</style>
<style type="text/css">
svg {
height: 100%;
width: 100%;
margin:auto;
}
path {
stroke-dasharray: 2100;
animation: draw 3.4s linear forwards;
/*transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); */
}
.path2 {
animation-delay: 2s; /*number not mattering here right now
animation: draw 3.4s linear ;*/
}
#keyframes draw {
from {
stroke-dashoffset: 2200;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes msvg {
0% { stroke-dashoffset: 1500; }
12% { stroke-dashoffset: 1500; }
44% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 0;
}
}
.wrapper {
position: relative;
background-image: url(https://filedn.com/lPKPli3Xz1KVxCemkqFzHfL/bss/treebanner_893x332.jpg);
background-size: contain;
margin: 0 auto;
max-width: 100%;
width: 1300px;
height: 483px;
z-index: 25;
background-repeat: no-repeat;
/* object-fit: cover; nothing */
}
.center-div /*fades out green line and tree see js*/
{
position: relative;
margin: 0 auto;
max-width: 100%;
height: auto;
z-index:13;
background-position: left top;
}
.media-div /*bring in word and stay*/
{
position: relative;
margin: 0 auto;
max-width: 100%;
height: auto;
z-index:1;
background-position: left top;
}
#keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
#line, #tree_2, #leaves, #background {
animation: fadeout 1s linear forwards;
animation-delay: 5.5s;
}
</style>
<g id="background">
<rect width="100%" height="100%" fill="black"/>
</g>
<g id="MEDIA">
<path class="st1" d="M234.7,201.1l-2.4,10.4c0.3,0.4,14.3-19.9,15.6-0.7c0.5,0.1,8.4-15,12.2-2.9c1.9,2.9,4.1,3.4,5.6,3.7
c7.8,1.7,15.8-6.6,17.3-8.1c0,0,8.1-9.5,11-5.5c2.2,3-4,6.8-10.8,5.9c-0.7,2.5-1.2,6.1,6.8,7.8c11.9,2.5,25-5,29.2-8.6
c3.7-3.1,7.1-5.6,9.3,0c-2.3-8.9-12.4,1.5-9.2,8c0.8,1.6,2.6,1.6,5.1-0.2c3.5-2.4,24.1-35.8,17.2-36.3c-7.3,0.5-9.7,22.1-9.7,22.8
c0,0.7-0.1,15.3,11.1,14.6c11.9-0.8,18.3-6.7,20.5-12.2c-3,7-2.6,11.4,7.3,12.5c11.4,0.2,20.1-14.5,27.3-14.7
c-0.2-0.8-13.9,5.6-11,13.7c0.2,0.4,0.5,0.9,1.2,1.1c2.2,0.7,6.7-4.4,8.8-11.2c-0.8-0.2,4.5,22.4,29.2,1.2"/>
<path class="st2" d="M364.2,188.6c0,0,4.1-1,4.2-2.1"/>
</g>
<g id="line">
<path class="st3" d="M750.9,194.2c0.9,0.9,47.6-162.4,47.6-162.4l-34.8,0.6H55.2c0,0-13.9,0-13.7,13.7c0.1,8.7,0,248.6,0,248.6
s-1.2,9.9,7.5,11.2s659.2,0.4,659.2,0.4s1.5,1.3,9.9-21.1c6.2-16.5,23.8-57.6,23.8-57.6l4.5-12.6c0,0,1.8-6.2,1.1-7"/>
<path class="st4" d="M739.8,232.8"/>
</g>
<g id="tree_2">
<path class="st5" d="M737.5,127.7c-0.6,0.3-1.5,2.9-2.1,3.2l-15.6-2.8l-3.3,4.6l0.4,5.8c0,0-2.1,3.7-8.7,7
c-7.8,3.9-13.6-0.4-14.2-0.1c-0.6-1.2-1.3,2.1-3.2,2.5c-1.9,0.5-1.7-3.5-1.3-4.1c0.3-0.6,2.5-2.2,3.7-4.5c1.1-2.3-1.9-3.6-3.2-2.5
c-0.4,0.3-1.7,1.1-1.8,2c-0.3,2.6-4.2,4.4-5.6,3c-2.1-2.1-5.9,2.8-8.1,3.3c-3.7-1.8-1.2-4.3-1.2-4.3l6.4-2.4l2.7-2l-1.9-2.8
c0,0-0.2-7,6.1-7.8c2.7-0.3-1.1,6.2-0.7,6.9c0.4,0.8,4.6-0.4,4.6-0.4s2.9,1.7,2.9-2.5c0-4.1,2.9,0,2.9,0l2.1,6.2
c0,0,7.7-10,8.3-9.1c0,0,0.4,5.8-1.7,9.9c-2.1,4.1,9.5,0,6.6-5.4c-2.9-5.4-1.7-3.7,0.4-4.6c2.1-0.8,5.8-1.2,10.4-7
c4.6-5.8,4.1-5,8.3-1.7s-9.1,7.5-9.1,7.5s6.6-1.2,12.4-3.3c5.8-2.1,3.1-7.2,2.2-8.5c-0.9-1.3-6-1.8-6-1.8s1.7-5.5,1.2-6.6
c-0.4-1.1-2.5,2.5-2.5,2.5l-3.7-3.3l-2.5,3.7c0,0-3.7,0.8-6.2,9.9c-2.5,9.1,2.1,4.6-1.2,3.7c-3.3-0.8-4.4-8-1.7-12.8
c2.4-4.2,8.3-4,8.3-4l-4.3-2.5c0,0-3.2,2.7-4.7,0.4c-1.9,4.2,1.2,8.1-7.1,1.1c-2.4,0.9,2,7-0.5,7c-2.5,0-4.1-2.1-4.1-2.1l-5.4,5
c0,0-1.2-6.7-5.3-2c-1.8,2.2,2.8-9.1-0.1-9.4c-2.9-0.3-4.1,8.5-5.4,6s-4.9-4.6-6.6,0.4c-0.8,2.2-2.2,6.5-4.3,7.4
c-0.3,1.1-0.3,2.3,0.1,3.7c0.1,1.1,3.1,3,1.8,7.1c-0.7,2.1-7.2-4.4-6.2-8.5c0.2-0.7,9.8-11.1,4.8-16c-2-1.9-3.7-0.4-5,1.1
c-1.2,1.6,2.2,9.2,0.7,9.1s-3.8-6-4.6-6.4c-0.7-0.4-1.3,4.5-5.1,4.5c-3.7,0,2.7-9.5-3.9-5.4c-6.6,4.1-1.7,9.9-1.7,9.9l-5,0.4
c0,0,4.1,4.1,1.2,4.6s-5.8-9.1-5.8-9.1s3.1,12.9,1.2,11.2c-9.7-8.8-2.7,3-6,4.6c-3.3,1.7-2.9-5.3-7.6-4.4c-1.2,0.2-3.8,2.7-0.9,4.8
c2.9,2.1-6.2,6.2-10.4,6.6s-0.2,6.5-4.6,8.7c-3.1,1.6-7.8-2.5-7.8-2.5l3.7,9.5l-5.8,2.5l0.8,4.6c0,0-1.9,3.3-0.4,3.7
c1.5,0.4,4.6-2.5,4.6-2.5s4.6,2.9,5.8,0c1.2-2.9,7.9-0.4,12.8-1.7c5-1.2,1.2,5.8,1.2,5.8s-7.5-3.3-6.6,4.1s5.4,4.6,5.4,2.9
c0-1.7,0-4.6,5-4.1c5,0.4,2.5,2.9,6.6,2.1c4.1-0.8,3.1-4.4,6.6-8.7c3.1-3.8,13.3,4.4,11.6,8.4"/>
<line class="st5" x1="611.9" y1="166.5" x2="612.1" y2="166.2"/>
<path class="st5" d="M748.8,207.6c-2-1.5-6.9,2.2-6.9,2.2s-6.9,1.5-8.9,2.1c-1.5,0.5-6.9,1.3-8.2,1.6c-0.8-0.6-4.9,0.3-6.7-0.4
c-1.9-0.8-5.8,0-7.9-3.3c-2.1-3.3-4.7-0.1-4.7-0.1l2.7-3.2l-2.5-6.6l-6.2-1.7l-6.6-5c0,0-9.5,1.7-8.3,2.9s-3.7,3.7,0.4,5
c4.1,1.2-9.5,6.2-9.1,0c0.4-6.2,0.4-10.4-5-6.2s-6.6,5-8.7,9.1c-0.9,1.7-5.2-2.3-5.2-2.3s-4.7,7.2-8,5.2c-3.3-2.1-1.3-5.5,0.6-7.7
c0.7,1.6,0.7,1.7,1.9,3.5c3.3,3.3,2.9,2.5,4.6-0.4c1.7-2.9,2.1-8.7,2.1-8.7l-3.3-2.1c0,0-7,5-12,5.4c-5,0.4-4-2.9-0.3-3.4
c4.4-0.6-3-8.6-7.1-6.9c-4.1,1.7-1.2-5.4,3.3-5c4.6,0.4,6.6,3.3,6.6,3.3l2.9-3.3v2.5l4.6-2.9l0.4,3.7c0,0-1.7,4.6,3.7,3.7
s5.8-2.5,5.8-2.5s-2.9-3.3-5.4-1.2c-2.5,2.1,2.9-6.2,6.6-3.3c3.7,2.9,6.2,5,8.3,2.5c2.1-2.5,0.8-8.3,4.1-7.5
c3.3,0.8-9.9-2.1-9.9-2.1l3.3-2.5c0,0-2.5-6.2-5.8-4.6c-3.3,1.7-8.3-1.2-8.3-1.2l-0.8,4.1c0,0-9.1,2.6-11.2,2.7
c-9.9,0.3-12.7,9.4-16.5,8.5c-5-1.2-5.1-2.6-3.8-5c1.5-3-5.7-2.7-2.9-4.6c5.4-3.5-4.6-10.1-4.6-3.3c0,2.1-2.1,7-2.9,7.5
c-0.8,0.4-2.5-3.7-2.5-3.7s-3.3,2.1-3.1-1.6c0.2-2.1,2.8-5.3,4.1-4"/>
<path class="st5" d="M612.1,166.2c-0.2,0-0.4,0-0.5,0"/>
<path class="st5" d="M682.7,117.6c0,0-3,0.8-3.9,5.1c-0.3,1.3-1.2,2.7-1.2,2.7S685.9,124.8,682.7,117.6z"/>
<path class="st5" d="M626.8,181.2c0,0-2.9,1.1-1.9,3.9c1,2.8-0.4,2-0.4,2s5.8-1.2,2.6-5.5"/>
<path class="st5" d="M684,161.2c0,0,2.1,2,4.4,0.1c0.8-0.3,2-0.4,2-0.4s-3.5-4.7-6.1,0L684,161.2z"/>
<path class="st5" d="M633.5,149.5c0,0,0.4-3.1-2.5-3.6c-2.9-0.5-1.5-1.3-1.5-1.3s-1.8,5.7,3.6,5L633.5,149.5z"/>
<path class="st5" d="M618.3,158.8c0,0,0.4-3.1-2.5-3.6c-2.9-0.5-1.5-1.3-1.5-1.3s-1.8,5.6,3.6,5"/>
<path class="st5" d="M639.7,128.4"/>
<path class="st5" d="M646.9,122.7"/>
<path class="st5" d="M659.5,98.5"/>
<path class="st0" d="M714.3,112.8c0,0-0.5,2,1.4,2.5c1.9,0.5,0.9,1,0.9,1s1.5-3.6-2.1-3.5L714.3,112.8z"/>
<path class="st5" d="M691.4,148c0,0-2.6,7.9,0.7,12l0.7-0.9c0,0,4.4-7.7,5.4-6.6s-1,7.5-0.5,8.1c0.5,0.6,4.6-6,4.6-0.6
c0,0.7,1.7,2.4-0.6,2.8c-2.3,0.5,1.2,2.8-0.2,3.4c-1.5,0.6-1.6-1.2-5.4,0.4c-3.8,1.7-4.8,5.5-4.8,5.5l6.7-1.3c0,0,0.3,0.5-1.2,0.7
c-4.7,0.5-10.9,13.3-10.9,13.3s0.8-0.2,4,0.4c7.2,1.4,10.3,6.4,13.2,6.4c2.9,0,8.5,4.7,13.1,13.5c2.7,3.7,5.2,0.1,5.2-0.7
c0-0.8-0.3-2.7-0.3-2.7s-0.1-18.4,3.9-21.1c-3,4.2-4.6,19.1-2.5,19.9c2.1,0.8,5.4,0,5.4,0l1.2,1.7c0,0,1.7,2.3,6.6-0.4
s7.1-4.9,12.1-6.1c1.2-0.3,2.2-0.3,3-0.1"/>
<path class="st0" d="M703.3,147.5c0,0,2.7,3.7,6.2,3.9c3.5,0.2,2.9-2.1,4.8-1.4"/>
<path class="st0" d="M693.9,164.6c0,0,0.3-2.1-1.8-2.7c-0.5-0.4-1.1-1-1.1-1s-1.3,4.2,2.7,3.7L693.9,164.6z"/>
<line class="st5" x1="750.2" y1="192.6" x2="749.3" y2="195.1"/>
</g>
<g id="leaves">
<path class="st5" d="M661.6,156c0,0,5.7,2.3,1.4,5.7c-3.3-3-1.9-5.7-1.9-5.7l1.6-2.7c0,0-0.9-4.9-7.7-3.7c2.7,7,7.2,2.6,7.2,2.6"/>
<path class="st0" d="M727.3,129.8c-0.2,2.2,1.8-1.3,2.2,4c0.1,2-1.5,2.9-1.5,2.9c4.1,1.2,4-2.2,3.7-3.1c-0.3-0.8-2.6-2.1-2.6-2.1"
/>
<path class="st0" d="M702.6,116.5c0,0-1.7-4.3,1.9-6.8C706.7,113.1,702.6,116.5,702.6,116.5c-0.1-0.1-1.6,3.3-3.8,3.2
c-2.2-0.1-3.8,3.4-3.8,3.4s3.3,2.4,4.1-3.3c4.9-1.4,4.9,1.5,4.9,2.6c0,0-0.4,4.4,4.4,4.2c0.6-2.8-4.4-4.2-4.4-4.2s5.8,1.9,7.9-2.9"
/>
<path class="st5" d="M641.2,147.2c0,0-0.5,1.2,3.8,3.5c4.4,2.3,3.3-1.7,3.3-1.7s-1.5-5,3.7-6.2c1.7,7.7-2.8,7.6-2.8,7.6"/>
<path class="st5" d="M628.9,139.9c0,0-7.7,0.2-7.3-4.4c0,0,6.2-3.3,8.3,4.6"/>
<path class="st5" d="M670.8,129.6c0,0-7-0.4-4.8-6.2c2.5,0.2,4.3,4.8,3.7,5.8"/>
<path class="st5" d="M662.4,130.7c-1.6-0.6-2.5-0.4-2.5-0.4s-2.7-2.7-6.8,0.7c-2.1,1.3-2.2,0-2.2,0c2.7,2.7,3.4,2.7,6,2.1
s2.6-2.7,2.6-2.7l-2.8-2.4c0,0-2.8-3.3,1.5-5.7c2.6-1.3,0.6-2.8,0.6-2.8s4,2.7,3.2,4.8c-0.8,2.1-6.1,1.9-6.1,1.9"/>
<path class="st5" d="M626.2,146.1c0,0-0.4,3.5-7.9,3.7c4.1-5,0.4-3.1,7.2-5.8C626.2,145.5,626.2,146.1,626.2,146.1z"/>
<path class="st0" d="M654.6,108.5c0,0-5.1-3.9-7.2,1.8c3.6,1.5,3.9,0.8,6.4-1.1"/>
<path class="st5" d="M644.1,154.9c0,0,2.8-0.7,5.2,4.8c-5-1.6-2.5,0.6-6.6-3.7C643.6,155.1,644.1,154.9,644.1,154.9z"/>
<path class="st0" d="M681.5,193.9c0,0,1.4,2.4-2,4.6c-2.9-3.4,1.2-5.5,0.6-5c4.1-0.1,3.5-2,2.9-4.9c-1.1-4.8-3-1.4-3-1.4
s-3.2,4.2-7.5,1.1c4.8-6.2,7.2-1.1,7.2-1.1"/>
<path class="st0" d="M643.7,164.3c0,0,0.7-5.3-3.5-6.4c-4.2-1.1-2-2.2-2-2.2s-2.5,8.1,5.4,8"/>
<path class="st5" d="M685.8,178.1c0,0,3.8-2.7,1.3-6.3c-2.5-3.6-1.5-3-1.5-3s-5.5,4.7,0.6,9.7"/>
<path class="st0" d="M667.2,118.8c0,0,1.8-4.3-2.1-6.3c-3.9-2-1.5-2.6-1.5-2.6s-4.3,7.4,3.5,9L667.2,118.8z"/>
<path class="st0" d="M674.7,139c0,0,0.6-1.6-1.2-3.7c-2.2-2.5-2.9-2.2-2.9-2.2S668.4,139.6,674.7,139"/>
<path class="st0" d="M650.2,167.9"/>
<path class="st0" d="M653.6,174.3"/>
<path class="st0" d="M644.2,179.8c0,0,0.5-3.7-2.3-4.5c-2.8-0.8-1.3-1.5-1.3-1.5s-1.7,5.7,3.6,5.6"/>
<path class="st0" d="M674.1,164.5c0,0-1.8-1.9-4.6-2c-1.7-0.1-2-0.3-2-0.3s2.3,5.4,6.3,2"/>
<path class="st0" d="M633.9,172.1c0,0,3.7,0.5,4.5-2.2c0.8-2.8,1.5-1.3,1.5-1.3s-5.7-1.8-5.6,3.5"/>
<path class="st0" d="M683.7,189.5c1.1,0.8,4.7,1.4,4.7,1.4s-0.9-5.1-5.2-2"/>
<path class="st0" d="M610.1,163.2c0,0,0.6,3.9,3.8,3.8c3.2-0.1,1.9,1.1,1.9,1.1s0.1-6.3-5.5-4.5"/>
<path class="st5" d="M632.6,123.3c0,0-6.1-5.2,0.1-9.2c2.3,1.9,1.4,8.2,0.1,9.4L632.6,123.3z"/>
<path class="st0" d="M668.4,105.3c0,0-6.6-1.3-3.7-6.8c2.5,0.5,4.4,5.4,4,6.8L668.4,105.3z"/>
<path class="st0" d="M720.8,172.6c0,0,0.2,2.6,2.4,4.5c1.3,1.1,1.4,1.5,1.4,1.5s1.6-5.7-3.6-5.5"/>
<path class="st0" d="M680.5,100.9c0,0-0.8,3.1,2.1,3.9c2.9,0.8,1.4,1.5,1.4,1.5s1.8-5.7-3.7-5.6L680.5,100.9z"/>
<path class="st5" d="M679,110.5c0,0,6.7-0.1,5.1,5.9c-2.5,0.1-5.5-4.3-5.3-5.8L679,110.5z"/>
<path class="st0" d="M656.5,120.2c0,0,6.4-0.8,3.9-6.3c-3.6,1.5-3.4,2.1-3.8,5.3L656.5,120.2z"/>
<path class="st0" d="M711.6,118.1c0,0-1.8-1.9-4.6-2c-1.7-0.1-2-0.3-2-0.3s2.3,5.4,6.3,2"/>
<path class="st0" d="M724.9,111.7c0,0-2.5-0.5-4.9,1.1c-1.4,0.9-1.8,0.9-1.8,0.9s5.1,3.1,6.3-2"/>
<g>
<path class="st5" d="M693.1,123.3c0,0-7.6,1.8-4.5-5.9c2.9-1.2,4.2,3.6,4.4,4.7L693.1,123.3z"/>
</g>
<g>
<path class="st0" d="M721.1,143.1c0,0-7.6,1.8-4.5-5.9c2.9-1.2,4.2,3.6,4.4,4.7L721.1,143.1z"/>
</g>
<g>
<path class="st0" d="M686.5,138.1c0,0-5.5,1.3-3.2-4.2c2.1-0.9,3,2.6,3.1,3.3L686.5,138.1z"/>
</g>
<path class="st0" d="M705.5,154.4c0.9-1,0.5-2.3,0.3-2.7c-1-2.1-1.6-2.1-1.6-2.1s-2.8,4.1,1.7,4.9"/>
<path class="st0" d="M672.3,162.7c0,0,0.1-2.6-1.8-4.7c-1.1-1.2-1.2-1.6-1.2-1.6s-2.2,5.5,3,5.9"/>
<path class="st0" d="M620,147.8c0,0-2.2-4.7-5.8-1.4c2,2.4,2.5,2,5,1.6"/>
<path class="st0" d="M637.1,112.9c0,0,0.1,4.2,3.8,5.2c2.5,0.7,2,1.7,2,1.7s1.3-7.4-5.6-6.4"/>
<path class="st0" d="M646.9,200.1c0,0-2.5-0.3-4.8,1.4c-1.3,1-1.7,1-1.7,1s5.3,2.7,6.2-2.4"/>
<path class="st5" d="M640.5,143c0,0,2.7,5.4-2.2,8.8c-2.9-4,2-8.3,2-8.3s1.6-4.1,4.3-4.2c2.7,0,4.4-4.3,4.4-4.3s-3.3-2.5-4.9,2.8
c-6.6,4-6.1-1.1-6.1-1.1s-0.7-7.5-6.4-6.9c0.3,4.3,0.1,3.7,5.4,6.3c5.3,2.5-4.5-3-8.1,4.5c2.7,4.6,5.8-2.3,5.8-2.3"/>
<path class="st0" d="M618.8,137.3c0,0-5,2.8-5-2.3c0-1.5,0-1.2,0.5-2.9C615,133.2,616.7,136,618.8,137.3z"/>
<path class="st5" d="M706.5,147c0,0,3.7-1.3,1.2-5.6c-2.5-4.2-3.7-0.3-3.7-0.3s-1.4,5-6.4,3.3c2.6-7.4,6.3-4,6.3-4"/>
<path class="st5" d="M715.1,158.3"/>
<path class="st5" d="M682.7,164.5c0,0,0.1,6.8-5.9,5.1c-0.2-4.8,4-4.3,5.5-4.1"/>
<path class="st5" d="M665.4,143.9c0,0-0.7,2.9-8.6,2.1c-1.5-0.2-3.8-7.6,7.2-3c3.2,1.5,3.6-1.4,2.3-1c-1.2,0.4-8.2-6.8-4.4-9
c3.8-2.3,3.5-1.7,5.4-1.6c-2.5,4.8-4.7,7.6-4.7,7.6"/>
<path class="st0" d="M647.3,133.4c-0.3-1.2-1.6-0.8-1.6-0.8s-0.4-2.6-3.9-1.2c-0.4,0.1-2.3-0.3-2.3-0.3c0.4,1.1,1.7,2.6,3.6,2.7
c1.9,0.1,2.3-1.3,2.3-1.3l-1.4-2.2c0,0-1.8-2.9,1.6-3.6c1-0.1,2.3-0.9,2.3-0.9s1.4,1.9,0.5,3.1c-1,1.2-4.5-0.1-4.5-0.1"/>
<path class="st5" d="M662.5,190.7c0,0-2.5,7,4.5,7.3c0.5-6.4-3-6.1-4.6-6.5"/>
<path class="st0" d="M665.2,189.5c0,0-1.9,0.9-4.3-2.7c3.7,0.5,1.7-0.8,5.1,1.8C665.5,189.3,665.2,189.5,665.2,189.5z"/>
<path class="st5" d="M677.9,144.3c1.1,1.4,1.9,1.6,1.9,1.6s3.2,4.3,8,4.1c-0.6-2.5-1.5-4.1-4-4.9c-2.5-0.8-3.6,1-3.6,1l1.1,3.5
c0.6,4.6-5.9,5.3-5.9,5.3s-1.6-2.9,0.2-4.2c1.8-1.4,5.4,0.9,5.4,0.9"/>
<path class="st5" d="M676.5,183.1c0,0,4-5.5,6.9-0.8c-2.5,3.7-5.7-0.3-6.2-0.3"/>
<path class="st5" d="M661.4,179.2c0,0-3.7,0.3-3.3-7.1c3.5,1.9,5,2.6,5.4,6.7C662,179.3,661.4,179.2,661.4,179.2z"/>
<path class="st5" d="M665,150.9c-0.2,0.1,3.8-5.1,6.8-0.4C668.3,155.6,665,150.9,665,150.9C665.5,150.5,665.1,150.8,665,150.9z"/>
<path class="st0" d="M715.8,146.5c0.3,0.2,1.6,3.2-2.2,3.6C712.1,146.7,715.5,146.3,715.8,146.5z"/>
<path class="st0" d="M662.1,207.4c0,0,5.2-3.4,5.5,2.1c-4.4,1-5.7-1.7-5.7-1.7l-1.3-2.8c0,0-4.5-2-7.4,4.3c7.3,1.8,6.3-4.5,6.3-4.5
"/>
<path class="st5" d="M648.1,175.7c0,0,4-5.5,6.9-0.8c-2.7,6.5-3.6,0-6.1,0.7"/>
<path class="st0" d="M631.2,155.3c0,0-4.4,2-6.4-5.2c3.9,0.7,6.9,1.7,5.3,5.4"/>
<path class="st0" d="M674.4,161.7c0,0-0.6-4.9,6.9-4.5c-1.9,3.5-3.7,6-6.8,3.4"/>
<path class="st0" d="M646.3,171.9c0,0-1.9-4.5,5.3-6.3c-0.8,3.9-1.9,6.9-5.5,5.2"/>
<path class="st0" d="M648.3,195.4c0,0-4.7-1.2-1.7-8c2.6,3,4.3,5.7,0.7,7.6"/>
<path class="st0" d="M636.4,176.6c0,0-2.8,4-8.1-1.2c3.7-1.4,6.8-2,7.4,1.9"/>
<path class="st0" d="M626.7,133c-1.1-0.6-0.4-1.7-0.4-1.7s-2.4-1.1-0.1-4c0.2-0.4,0.3-2.3,0.3-2.3c1,0.7,2,2.3,1.7,4.2
c-0.4,1.8-1.8,1.9-1.8,1.9l-1.8-1.9c0,0-2.3-2.5-3.9,0.6c-0.3,1-1.5,2-1.5,2s1.4,1.9,2.9,1.3c1.5-0.6,1.1-4.4,1.1-4.4"/>
<path class="st0" d="M625.3,163.8c-1.1,0.5-1.6-0.8-1.6-0.8s-2.3,1.3-3.3-2.3c-0.2-0.4-1.7-1.6-1.7-1.6c1.1-0.4,3.1-0.2,4.3,1.1
c1.3,1.4,0.4,2.6,0.4,2.6l-2.6,0.3c0,0-3.4,0.4-1.8,3.5c0.6,0.8,0.7,2.4,0.7,2.4s2.4,0,2.7-1.6c0.4-1.5-2.9-3.5-2.9-3.5"/>
<path class="st0" d="M639.4,192.1c0,0-1.6,4-7.2,0.5c2.9-1.9,5.5-3,6.7,0.3"/>
<path class="st5" d="M697.3,107.4c0,0-3.4-1.5,0.7-7.8c2.1,3.3,3.1,4.7,1.4,8.5C697.8,107.8,697.3,107.4,697.3,107.4z"/>
<path class="st0" d="M738.1,110.1c0,0-1.5-5.6,2.5-4.8c-0.5,3.4-2.6,4.4-2.6,4.4s0-0.2-1.6,2c-2.2,3.1-0.2,2.4,2.2,2.9
c0.7-0.4,1.6-2.6,4.5,0.8c-3.1,2.2-4.3-0.6-4.5-0.8"/>
<polyline class="st5" points="720.4,128.7 722,133.2 724.2,133.2 "/>
<path class="st0" d="M668,189.7c0,0-1.5-1.4,1-4.9c0.8,3.7,1.3,1.3,0.1,5.4C668.3,189.9,668,189.7,668,189.7z"/>
<path class="st0" d="M696.9,170.2c1.3,0.9,2.1,0.8,2.1,0.8s3.9,2.7,7.9,1.1c-1.2-1.9-2.4-3-4.8-3c-2.3,0-2.8,1.9-2.8,1.9l2,2.6
c1.8,3.7-3.4,6.2-3.4,6.2s-2.2-1.9-1.1-3.6c1.1-1.7,4.8-0.8,4.8-0.8"/>
<path class="st0" d="M703.5,165.9c-0.1,0.1,2.1-5,5.4-1.8C707.2,169.1,703.5,165.9,703.5,165.9
C703.9,165.5,703.6,165.8,703.5,165.9z"/>
<path class="st0" d="M632.5,199.6c0,0.2-1.1-5.3,3.5-4.5C637.4,200.2,632.5,199.6,632.5,199.6C632.6,199.1,632.5,199.6,632.5,199.6
z"/>
</g>
</svg>
</div>
</div>

Fade color in path tag

In HTML with SVG you can create a rect with fading color:
<svg>
<rect width="100%" height="100%">
<animate attributeName="fill" values="red;blue;red" dur="10s" repeatCount="indefinite" />
</rect>
</svg>
Now in my code I have a path like that:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="247pt" height="543pt" viewBox="0.00 0.00 246.86 543.19">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 539.1859)">
<!-- c->e -->
<g id="a1124" class="edge">
<title>c->e</title>
<path fill="none" stroke="#ff0000" stroke-width="3" d="M208.109,-297.8625C205.1217,-279.2357 200.2512,-248.8658 195.5911,-219.8076" />
<polygon fill="#ff0000" stroke="#ff0000" stroke-width="3" points="198.9943,-218.9251 193.9549,-209.6055 192.0827,-220.0336 198.9943,-218.9251" />
</g>
</g>
</svg>
I am looking for a way to fade the color of the path along the path so that it illustrates some kind of data flow. Is there a way to accomplish that? (via CSS or Javascript).

Try this
#keyframes fade {
0% {
stroke: red;
fill: red;
}
50% {
stroke: blue;
fill: blue;
}
100% {
stroke: red;
fill: red;
}
}
#fade {
animation-name: fade;
animation-duration: 10s;
animation-iteration-count: infinite;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="247pt" height="543pt" viewBox="0.00 0.00 246.86 543.19">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 539.1859)">
<!-- c->e -->
<g id="a1124" class="edge">
<title>c->e</title>
<path id="fade" stroke="#ff0000" stroke-width="3" d="M208.109,-297.8625C205.1217,-279.2357 200.2512,-248.8658 195.5911,-219.8076" />
<polygon id="fade" stroke-width="3" points="198.9943,-218.9251 193.9549,-209.6055 192.0827,-220.0336 198.9943,-218.9251" />
</g>
</g>
</svg>

How to animate stroke in svg image on hover

I'm trying to make a single stroke in my svg drawing to be highlighted on hover.
Is it possible to be done with css or do I need to use javascript?
Here's my html:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px"
height="768px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
<g id="Warstwa_1">
<g>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M825.61,601.428c0-55.844-117.614,25.921-257.144,29.87
c-137.662,3.896-176.422-82.646-210.389-81.817c-53.246,1.299,6.986,64.935,6.986,64.935"> <animate dur="0.1s" to="#000000" from="#00755F" attributeName="stroke" begin="mouseover"/>
<animate dur="0.1s" to="#4e86b1" from="#00755F" attributeName="stroke" begin="mouseout"/></path>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M826.179,592.094c0-55.844-121.106,41.499-260.634,44.886
c-135.795,3.409-172.364-99.479-208.035-95.535c-50.922,5.629,9.69,69.933,9.69,69.933"> <animate dur="0.1s" to="#000000" from="#00755F" attributeName="stroke" begin="mouseover"/>
<animate dur="0.1s" to="#4e86b1" from="#000000" attributeName="stroke" begin="mouseout"/></path>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M826.747,582.759c0-55.844-124.6,57.077-264.124,59.902
c-133.929,2.922-167.956-116.474-205.682-109.252c-48.385,9.262,12.395,74.93,12.395,74.93"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M827.314,573.425c0-55.844-128.091,72.655-267.613,74.919
c-132.062,2.434-163.305-133.679-203.328-122.971c-45.755,12.242,15.098,79.928,15.098,79.928"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M827.883,564.09c0-55.844-131.584,88.234-271.104,89.936
c-130.195,1.947-158.511-151.123-200.974-136.688c-43.118,14.657,17.802,84.925,17.802,84.925"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M828.451,554.756c0-55.844-135.076,103.812-274.595,104.951
c-128.328,1.461-153.666-168.831-198.62-150.405c-40.533,16.613,20.506,89.923,20.506,89.923"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M829.02,545.422c0-55.844-138.568,119.39-278.085,119.967
c-126.461,0.974-153.608-194.835-196.266-164.123c-40.653,11.203,23.209,94.921,23.209,94.921"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M829.588,536.087c0-55.844-142.062,134.968-281.575,134.983
c-124.594,0.486-149.806-213.533-193.912-177.84c-38.554,12.853,25.913,99.918,25.913,99.918"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M830.156,526.753c0-55.844-145.554,150.546-285.065,149.999
c-122.728,0-146.004-232.231-191.559-191.558c-36.455,14.504,28.617,104.915,28.617,104.915"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M830.724,517.419c0-55.844-149.045,166.124-288.555,165.016
c-120.861-0.487-135.317-242.556-189.205-205.276c-31.222,21.599,31.321,109.913,31.321,109.913"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M831.292,508.084c0-55.844-152.538,181.702-292.045,180.032
c-118.994-0.975-131.311-261.733-186.852-218.993c-29.2,22.47,34.025,114.91,34.025,114.91"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M831.86,498.75c0-55.844-156.03,197.28-295.535,195.048
c-117.127-1.462-127.649-281.201-184.498-232.711c-27.306,23.291,36.729,119.908,36.729,119.908"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M832.429,489.416c0-55.844-159.522,212.857-299.026,210.063
c-115.26-1.948-124.374-300.938-182.143-246.429c-25.538,24.097,39.433,124.906,39.433,124.906"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M832.997,480.081c0-55.844-163.016,228.437-302.517,225.08
c-113.393-2.435-121.518-320.91-179.79-260.146c-23.895,24.917,42.137,129.903,42.137,129.903"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M833.564,470.747c0-55.844-166.507,244.015-306.006,240.097
c-111.526-2.923-119.102-341.081-177.436-273.864c-22.373,25.78,44.84,134.901,44.84,134.901"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M834.133,461.412c0-55.844-170,259.593-309.496,255.113
c-109.66-3.41-117.128-361.4-175.082-287.581c-20.965,26.704,47.544,139.898,47.544,139.898"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M834.701,452.078c0-55.844-173.492,275.171-312.986,270.129
c-107.793-3.896-115.586-381.818-172.729-301.299c-19.664,27.709,50.248,144.896,50.248,144.896"/>
</g>/g></svg>
As you can see I tried 'animate' but it doesn't work.
I also tried css like here:
g#Warstwa_1 path
{ stroke: red; }
g#Warstwa_1:hover path { stroke: blue; }
This makes the whole image to change color instead of a single line.
Here's live example:
http://www.ewelinawoloszyn.com/index11.html
Any suggestions are more than welcome. Many thanks in advance for your help.

You need to set the :hover state on the actual path element.
Also note that your SVG has a malformed closing <g> at the end.
svg {
margin-top: -200px;
/* demo positioning */
}
#Warstwa_1 path {
stroke-width: 2px;
/* for demo pusposes only */
transition: stroke .4s;
}
#Warstwa_1 path:hover {
stroke: red;
}
<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 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
<g id="Warstwa_1">
<g>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M825.61,601.428c0-55.844-117.614,25.921-257.144,29.87
c-137.662,3.896-176.422-82.646-210.389-81.817c-53.246,1.299,6.986,64.935,6.986,64.935"> <animate dur="0.1s" to="#000000" from="#00755F" attributeName="stroke" begin="mouseover"/>
<animate dur="0.1s" to="#4e86b1" from="#00755F" attributeName="stroke" begin="mouseout"/></path>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M826.179,592.094c0-55.844-121.106,41.499-260.634,44.886
c-135.795,3.409-172.364-99.479-208.035-95.535c-50.922,5.629,9.69,69.933,9.69,69.933"> <animate dur="0.1s" to="#000000" from="#00755F" attributeName="stroke" begin="mouseover"/>
<animate dur="0.1s" to="#4e86b1" from="#000000" attributeName="stroke" begin="mouseout"/></path>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M826.747,582.759c0-55.844-124.6,57.077-264.124,59.902
c-133.929,2.922-167.956-116.474-205.682-109.252c-48.385,9.262,12.395,74.93,12.395,74.93"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M827.314,573.425c0-55.844-128.091,72.655-267.613,74.919
c-132.062,2.434-163.305-133.679-203.328-122.971c-45.755,12.242,15.098,79.928,15.098,79.928"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M827.883,564.09c0-55.844-131.584,88.234-271.104,89.936
c-130.195,1.947-158.511-151.123-200.974-136.688c-43.118,14.657,17.802,84.925,17.802,84.925"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M828.451,554.756c0-55.844-135.076,103.812-274.595,104.951
c-128.328,1.461-153.666-168.831-198.62-150.405c-40.533,16.613,20.506,89.923,20.506,89.923"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M829.02,545.422c0-55.844-138.568,119.39-278.085,119.967
c-126.461,0.974-153.608-194.835-196.266-164.123c-40.653,11.203,23.209,94.921,23.209,94.921"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M829.588,536.087c0-55.844-142.062,134.968-281.575,134.983
c-124.594,0.486-149.806-213.533-193.912-177.84c-38.554,12.853,25.913,99.918,25.913,99.918"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M830.156,526.753c0-55.844-145.554,150.546-285.065,149.999
c-122.728,0-146.004-232.231-191.559-191.558c-36.455,14.504,28.617,104.915,28.617,104.915"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M830.724,517.419c0-55.844-149.045,166.124-288.555,165.016
c-120.861-0.487-135.317-242.556-189.205-205.276c-31.222,21.599,31.321,109.913,31.321,109.913"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M831.292,508.084c0-55.844-152.538,181.702-292.045,180.032
c-118.994-0.975-131.311-261.733-186.852-218.993c-29.2,22.47,34.025,114.91,34.025,114.91"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M831.86,498.75c0-55.844-156.03,197.28-295.535,195.048
c-117.127-1.462-127.649-281.201-184.498-232.711c-27.306,23.291,36.729,119.908,36.729,119.908"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M832.429,489.416c0-55.844-159.522,212.857-299.026,210.063
c-115.26-1.948-124.374-300.938-182.143-246.429c-25.538,24.097,39.433,124.906,39.433,124.906"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M832.997,480.081c0-55.844-163.016,228.437-302.517,225.08
c-113.393-2.435-121.518-320.91-179.79-260.146c-23.895,24.917,42.137,129.903,42.137,129.903"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M833.564,470.747c0-55.844-166.507,244.015-306.006,240.097
c-111.526-2.923-119.102-341.081-177.436-273.864c-22.373,25.78,44.84,134.901,44.84,134.901"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M834.133,461.412c0-55.844-170,259.593-309.496,255.113
c-109.66-3.41-117.128-361.4-175.082-287.581c-20.965,26.704,47.544,139.898,47.544,139.898"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M834.701,452.078c0-55.844-173.492,275.171-312.986,270.129
c-107.793-3.896-115.586-381.818-172.729-301.299c-19.664,27.709,50.248,144.896,50.248,144.896"/>
</g></g></svg>

I had to add closing tag for .hi class and added
g#Warstwa_1_kopia {
display:block;
}
Then Paulie_D CSS worked.

for animation, you can use this code(CSS-animation) and modify according to your requirement
svg:hover path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
stroke: blue;
}
}
here I apply hover effect on svg(tag).
and for more details about CSS-animation check the link.

Google Visualization Pie Chart - changing text coordinates

I have made a simple donut chart (based on the Google Visualization example at https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#donut).
As it only shows one slice (the other is transparent/invisible), I'd like to move the <text> element to the centre of the chart, i.e., within the hole. I know that it simply involves updating the 'x' and 'y' coordinate attributes but I'm having trouble accessing them in the DOM, particularly as there are no IDs/classes to hang onto.
So, how can I target the <text> element of the penultimate <g> element in this code? I'd like to change x="239.45622566746957" y="285.69328724429994" to x="200" y="200"
Javascript preferred but jQuery also fine...
<div id="donutchart" style="position: relative;">
<div style="position: relative; width: 560px; height: 412px;" dir="ltr">
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
<svg width="560" height="412" style="overflow: hidden;" aria-label="A chart.">
<defs id="defs"/>
<rect x="0" y="0" width="560" height="412" stroke="none" stroke-width="0" fill="#ffffff"/>
<g>
<text text-anchor="start" x="107" y="58.2" font-family="Arial" font-size="12" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">Time spent at work</text>
</g>
<g>
<rect x="340" y="79" width="113" height="31" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"/>
<g>
<rect x="340" y="79" width="113" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"/>
<g>
<text text-anchor="start" x="357" y="89.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Work</text>
</g>
<rect x="340" y="79" width="12" height="12" stroke="none" stroke-width="0" fill="#b1d123"/>
</g>
<g>
<rect x="340" y="98" width="12" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"/>
<rect x="340" y="98" width="12" height="12" stroke="none" stroke-width="0" fill-opacity="1" fill="none"/>
</g>
</g>
<g>
<path d="M179.37407264075225,181.84279120188216L127.43518160188061,144.10697800470538A107,107,0,0,1,214,100L214,164.2A42.800000000000004,42.800000000000004,0,0,0,179.37407,181.84279" stroke="#ffffff" stroke-width="1" fill-opacity="1" fill="none"/>
<text text-anchor="start" x="163.54377433253043" y="136.70671275570004" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#ffffff">15%</text>
</g>
<g>
<path d="M214,164.2L214,100A107,107,0,1,1,127.43518,144.10697L179.37407264075225,181.84279120188216A42.800000000000004,42.800000000000004,0,1,0,214,164.19999" stroke="#ffffff" stroke-width="1" fill="#b1d123"/>
<text text-anchor="start" x="239.45622566746957" y="285.69328724429994" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#ffffff">85%</text>
</g>
<g/>
</svg>
</div>
</div>
<div style="display: none; position: absolute; top: 422px; left: 570px; white-space: nowrap; font-family: Arial; font-size: 12px; font-weight: bold;">85 (85%)
</div>
<div></div>
</div>

Use a selector like this:
document.querySelector('#donutchart svg > g:nth-last-child(2) text');
This will not work in IE8, as older versions of IE do not support SVG. If you need to support IE8, you will need a selector for the equivalent VML structure.

Categories

Resources