WordPressの使用法:SVGアニメーションの表示

WordpressでSVGアニメーションを表示する方法はいろいろあるようです。

下のリンクに書かれたやり方でサンプルを表示できました。

ネット上のsnap.svgを読み込んでいるようですが、まだよく理解できていません。

事前に、Wordpressのアドオンであるraw HTMLをインストールし、下に示されたスクリプトをで囲います。

How to create animated SVGs (and display them in WordPress)

 


 
   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
  
   
     
       
         
       
       
         
       
       
         
       
     
     
       
     
     
       
         
            image/svg+xml
           
           
         
       
     
     
       
     
     
                       
       
     
     
       
     
   
    <script>
      var s = Snap("#smoke");
      var go = function animate(){
        s.attr({cy: 60, r: 2});
        s.animate({cy: -10, r: 12}, 3000);
        setTimeout(go, 3000);
      }
      go();
    </script>
 

Please follow and like us:

About shibatau

I was born and grown up in Kyoto. I studied western philosophy at the University and specialized in analytic philosophy, especially Ludwig Wittgenstein at the postgraduate school. I'm interested in new technology, especially machine learning and have been learning R language for two years and began to learn Python last summer. Listening toParamore, Sia, Amazarashi and MIyuki Nakajima. Favorite movies I've recently seen: "FREEHELD". Favorite actors and actresses: Anthony Hopkins, Denzel Washington, Ellen Page, Meryl Streep, Mia Wasikowska and Robert DeNiro. Favorite books: Fyodor Mikhailovich Dostoyevsky, "The Karamazov Brothers", Shinran, "Lamentations of Divergences". Favorite phrase: Salvation by Faith. Twitter: @shibatau

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.