html - svg子元素上的CSS变换原点问题
问题描述
我在尝试缩放子元素时遇到了变换原点的问题。
在尝试在较大的 svg 中缩放动画时,它使用整个 svg 的变换原点 (0,0),而不是我要缩放的元素的中心。
这使它看起来像是“从左上角飞入”,这不是我想要的。我希望使它从元素中心缩放。
如何获得相对于我正在制作动画的特定元素设置的变换原点,而无需对子元素本身的 (x,y) 位置进行硬编码。
这是我正在处理的问题的一个简单示例
@keyframes scaleBox {
from {transform: scale(0);}
to {transform: scale(1);}
}
#animated-box {
animation: scaleBox 2s infinite;
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="
width: 195px;
"><defs>
<style>.cls-1{fill:#7f7777;}.cls-2{fill:#fff;}</style>
</defs>
<rect class="cls-1" x="0.5" y="0.5" width="99" height="99"></rect>
<path d="M99,1V99H1V1H99m1-1H0V100H100V0Z"></path>
<rect id="animated-box" class="cls-2" x="10.5" y="8.5" width="22" height="6"></rect></svg>
解决方案
你需要 transform-box: fill-box;
@keyframes scaleBox {
from {transform: scale(0);}
to {transform: scale(1);}
}
#animated-box {
transform-box: fill-box;
animation: scaleBox 2s infinite;
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="
width: 195px;
"><defs>
<style>.cls-1{fill:#7f7777;}.cls-2{fill:#fff;}</style>
</defs>
<rect class="cls-1" x="0.5" y="0.5" width="99" height="99"></rect>
<path d="M99,1V99H1V1H99m1-1H0V100H100V0Z"></path>
<rect id="animated-box" class="cls-2" x="10.5" y="8.5" width="22" height="6"></rect></svg>
推荐阅读
- python - 用户警告:`ResNet50(include_top=False)` 的输出形状自 Keras 2.2.0 起已更改
- php - 仅以 laravel 中 hasMany 关系中的最新记录为条件
- html - 为什么这个动画不播放?
- docker - 面临 ssh 到 docker 容器的问题
- xcode - 升级到 Xcode 11.4.1、VS for Mac 8.5.4 和 Xamarin.iOS 13.16 后无法创建 IPA 存档
- reactjs - 为几个视频反应背景视频循环
- python - 如果包含单个 NaN 并合并列,则将整个组设置为 NaN
- php - PHP:表单验证“上传许多文件”
- django - 如何获取最后 X 小时的对象?
- c# - 找不到实体类型“赞助商”的种子身份