当我尝试使用变换函数缩放 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>
最佳答案
是的!但是你需要一些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>
关于html - 缩放 svg，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39307854/