보기에 SVG 애니메이션 표시

SVG가 보일 때 애니메이션 CSS를 표시하고 해당 요소로 다시 스크롤하면 다시 시작됩니다. 데모를 발견하고 SVG 요소를 넣으려고했지만 작동하지 않습니다. 도와주세요! 감사!보기에 SVG 애니메이션 표시

Activate CSS3 animation when the content scrolls into view

내 HTML은

<div class="lineNone"> 
     <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" viewBox="0 0 614 53" style="enable-background:new 0 0 614 53; width: 70%; margin-top: 40px;" xml:space="preserve"> 

    <polyline class="st0 eighty" points="0.5,53 0.5,20.7 613.5,20.7 613.5,53 "/><line class="st1" x1="307" y1="53" x2="307" y2="0"/></svg> 
</div>

출처

2017-12-14 lel

이것은 당신이 할 수있는 일이며,

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script> 
    <script> 
     $(window).scroll(function() { 
     var s = $(window).scrollTop(), 
       d = $(document).height(), 
       c = $(window).height(); 
       scrollPercent = (s/(d-c)) * 100; 
       var position = scrollPercent; 

     $("#progressbar").attr('value', position); 

     }); 
    </script> 
    <style> 
     progress { 
      position:fixed; 
      top:15px; 
     } 
    </style> 
</head> 
<body> 
    <progress id="progressbar" value="0" max="100"></progress> 

    <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/accessible.svg"> 
    <div id="horizontal">test</div> 
</body>

출처

2017-12-14 11:01:17

답변

관련 문제