SVGのスケーリング

変換関数を使用してSVGをスケーリングしようとすると、SVGもスケーリングされながら変換されます。固定位置にとどまっている間にSVGにスケーリングだけを適用する方法はありますか？SVGのスケーリング

SVGコード

<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 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve"> 

<style type="text/css"> 
.st0{fill:#207589; 
position:fixed; 
transform: scale(1,2); 
animation: dash 4s linear forwards;} 

@-webkit-keyframes dash { 
0% { 
    transform: scale(1,1) ; 
} 

100% { 
    transform: scale(1,2); 
}} 





.st1{fill:#E0674B;} 
.st2{fill:#4DF464;} 
.st3{fill:#A53A59;} 
</style> 
<rect x="544.2" y="404.3" class="st0" width="85.5" height="111.5"/> 
<polygon class="st1" points="544.2,404.3 544.2,489.7 629.7,489.7 "/> 
<path class="st2" d="M544.2,515.8c0,0,25.5-23.1,25.5-65.6v65.6H544.2z"/> 
<path class="st2" d="M629.7,515.8c0,0-25.5-23.1-25.5-65.6v65.6H629.7z"/> 
<circle class="st3" cx="586.9" cy="459.3" r="36.1"/> 
</svg>

出典

2016-09-03 Renzous Rakesh

はい！しかし、あなたはいくつかのjsが必要になります！
このdemo

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 

    <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 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve"> 
    <style type="text/css"> 
/*  .st0{ 
      fill:#207589; 
      position:fixed; 
      transform: scale(1,2); 
      animation: dash 4s linear forwards; 
     } 
*/ 
/* @-webkit-keyframes dash { 
     0% { 
      transform: scale(1,1) ; 
     } 

     100% { 
      transform: scale(1,2); 
     } 
    }*/ 





     .st1{fill:#E0674B;} 
     .st2{fill:#4DF464;} 
     .st3{fill:#A53A59;} 
    </style> 
    <rect x="544.2" y="404.3" class="st0" width="85.5" height="111.5"/> 
    <polygon class="st1" points="544.2,404.3 544.2,489.7 629.7,489.7 "/> 
    <path class="st2" d="M544.2,515.8c0,0,25.5-23.1,25.5-65.6v65.6H544.2z"/> 
    <path class="st2" d="M629.7,515.8c0,0-25.5-23.1-25.5-65.6v65.6H629.7z"/> 
    <circle class="st3" cx="586.9" cy="459.3" r="36.1"/> 
    </svg> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> 
<script> 
    var tl = new TimelineMax(); 

    // settings ... 
    tl.set(".st0", { 
     fill:"#207589", 
     position:"fixed", 
     transformOrigin : "50% 50%" 
    }); 

    tl.fromTo(".st0",4,{ 
     scale: (1,1) 
    }, { 
     scale: (1,2) 
    }); 
</script> 
</body> 
</html>

出典

2016-09-03 14:33:42

答えて

関連する問題