I want it to work when hovering in svg field with SVG Scroll

I have an animation like this, when the page is loaded, all the animation is running and finished.

I want it to work when scrolling to svg field

Somewhere they wrote something like it is necessary to install packages on the site in order to use jquery. I hope I can handle it with javascript without uploading any files.

I tried a few Jquery and javascript scripts I found here, but I couldn't find a solution.

.st0, .st1{
fill:none;
stroke:#000000;
stroke-miterlimit:10;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: draw1 4s linear forwards;
animation: draw1 4s linear forwards;
}

  
@-webkit-keyframes draw1{
  to {stroke-dashoffset: 0;}
}
@keyframes draw1{
  to {stroke-dashoffset: 0;}
}
@-webkit-keyframes draw2{
  to {stroke-dashoffset: 0;}
}
@keyframes draw2{
  to {stroke-dashoffset: 0;}
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 1514.85 819.06" style="enable-background:new 0 0 1514.85 819.06;" xml:space="preserve" >
<style type="text/css">
    .st0{fill:none;stroke:#58595B;stroke-width:2;stroke-miterlimit:10;}
    .st1{fill:none;stroke:#7F8183;stroke-width:2;stroke-miterlimit:10;}
    .st2{fill:#7E8183;}
    .st3{font-family:'Tahoma';}
    .st4{font-size:27px;}
    .st5{fill:#7E8183;stroke:#7E8183;stroke-width:0.09;stroke-miterlimit:10;}
    .st6{fill:#FFFFFF;}
    .st7{fill:none;stroke:#7E8183;stroke-width:2;stroke-miterlimit:10;}
    .st8{fill:#7E8183;stroke:#FFFFFF;stroke-miterlimit:10;}
    .st9{fill:#7E8183;stroke:#FFFFFF;stroke-width:1.6;stroke-miterlimit:10;}
    .st10{fill:#7E8183;stroke:#FFFFFF;stroke-width:0.2174;stroke-miterlimit:10;}
</style>
<g id="Layer_1">
    <polyline class="st0" points="567.16,290.57 402.56,290.57 402.56,193.38  "/>
</g>
<g id="Layer_2">
    <polyline class="st0" points="567.16,373.55 137.02,373.55 137.02,193.38  "/>
</g>
<g id="Layer_3">
    <polyline class="st0" points="567.16,455.77 139.01,455.77 139.01,636.41  "/>
</g>
<g id="Layer_4">
    <polyline class="st0" points="567.16,539.21 402.56,539.21 402.56,636.41  "/>
</g>
<g id="Layer_5">
    <polyline class="st1" points="991.61,290.57 1156.21,290.57 1156.21,193.38  "/>
</g>
<g id="Layer_6">
    <polyline class="st1" points="991.61,373.55 1419.66,373.55 1419.66,193.38  "/>
</g>
<g id="Layer_7">
    <polyline class="st1" points="991.61,455.77 1419.66,455.77 1419.66,636.41  "/>
</g>
<g id="Layer_8">
    <polyline class="st1" points="991.61,539.21 1156.21,539.21 1156.21,636.41  "/>
</g>

</svg>

I want it to work when hovering in svg field with SVG Scroll

0 Answers