缩放svg

Question

When I try to scale an SVG by using the transform function the SVG also translates as it is being scaled. 当我尝试通过使用转换功能缩放SVG时，SVG也会在缩放时转换。 Is there way to apply only scaling on the SVG while it remains in a fixed position. 有没有办法在SVG保持固定位置时仅对SVG应用缩放。

jsFiddle jsFiddle

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

Answer 1

Yes! 是! but you will need some js! 但您将需要一些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>

缩放svg

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-09-03 14:33:42

缩放svg

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-09-03 14:33:42

解决方案1
0 已采纳 2016-09-03 14:33:42