Question

当我尝试使用变换函数缩放SVG时，SVG也会在缩放时进行转换。有没有办法在SVG保持固定位置时仅对SVG应用缩放。

SVG代码

var x = document.getElementById('dp_head');
document.querySelector('h2').innerHTML = name;

Answer 1

是的！但你需要一些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>

缩放svg

1 个答案: