Scaling of a svg

Question

When I try to scale an SVG by using the transform function the SVG also translates as it is being scaled. Is there way to apply only scaling on the SVG while it remains in a fixed position.

jsFiddle

SVG code

<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>

Answer 1

Yes! but you will need some js!
This 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>

Scaling of a svg

Question

1 answers

solution1
0 ACCPTED 2016-09-03 14:33:42

Scaling of a svg

Question

1 answers

solution1 0 ACCPTED 2016-09-03 14:33:42

solution1
0 ACCPTED 2016-09-03 14:33:42