सीएसएस

Question

का उपयोग करके svg पथ भरें एनिमेट करें सीएसएस का उपयोग करके svg fill को बदलना संभव है। लेकिन मैं एक एनीमेशन बनाने का प्रबंधन नहीं किया था।

<svg version="1.1" id="tick" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve"> 
<rect id="fill" x="21" y="26" width="60" height="60"/> 
</svg> 

और, एस.ए.एस.एस. का उपयोग कर:

@include keyframes(loading) 
    0% 
    fill: black 
    50% 
    fill: white 
    100% 
    fill: black 
#fill 
    fill: white 
    @include animation(loading 3s infinite) 

क्या मैं गलत कर रहा हूँ यहाँ मेरी svg वस्तु है?

Answer 1

संपादित

ठीक है यह कुछ इस तरह काम करना चाहिए की तरह दिखता है।

<svg version="1.1" id="tick" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve"> 
    <style type="text/css" > 
     <![CDATA[ 

      @keyframes fill { 
       0% { 
        fill: black; 
       } 
       50% { 
        fill: white; 
       } 
       100% { 
        fill: black; 
       } 
      } 

      #fill { 
       fill: black; 
       animation-name: fill; 
       animation-duration: 3s; 
       animation-iteration-count: infinite; 
      } 

     ]]> 
    </style> 
    <rect id="fill" x="21" y="26" width="60" height="60"/> 
</svg> 

यहाँ उदाहरण है: http://jsbin.com/ayiheb/2/edit