ビューに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

ビューにSVGアニメーションを表示する

答えて

関連する問題