SVG image / shape scaled up is blurry on transition - HTML CSS SVG

HTML CSS examples for SVG:Animation

  1. HOME
  2. HTML CSS
  3. SVG
  4. Animation

Description

SVG image / shape scaled up is blurry on transition

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> <!--   w  ww .  j a v a 2s  .c  o  m-->
 <body> 
  <svg height="1000" width="1000" id="circle"> 
   <circle cx="500" cy="500" r="40" stroke="black" stroke-width="3" fill="red"> 
    <animate fill="freeze" dur="2s" to="400" from="40" attributeName="r" begin="mouseover" /> 
    <animate fill="freeze" dur="2s" to="40" from="400" attributeName="r" begin="mouseout" /> 
   </circle> 
  </svg>  
 </body>
</html>

Related Tutorials