为什么我的 SVG 子元素动画从错误的原点开始？

SVG 子元素上的 CSS 变换原点问题

使用 SVG 时，控制子元素的变换原点可能具有挑战性元素。默认情况下，CSS 动画和转换使用整个 SVG 的 (0,0) 原点，而不是正在动画的特定元素的中心。

理解问题

中在提供的示例中，目的是从中心缩放子元素“animated-box”。然而，动画从 SVG 的 (0,0) 原点开始，给人一种盒子“从左上角飞进来”的错觉。

解决方案：变换盒子

要设置相对于动画元素的变换原点，我们可以使用“transform-b​​ox”属性：

<code class="css">transform-box: fill-box;</code>

“fill-box”值告诉浏览器使用子元素的边界框（它填充的区域）作为变换原点。这确保动画按照预期从“animated-box”中心缩放。

更新的示例

将transform-b​​ox属性应用到我们的示例：

<code class="css">@keyframes scaleBox {
  from {transform: scale(0);}
  to {transform: scale(1);}
}
#animated-box {
  transform-box: fill-box;
  animation: scaleBox 2s infinite;
}</code>

<code class="html"><svg ...>
  ...
  <rect id="animated-box" ...>
  ...
</svg></code>

现在，“动画框”从其中心缩放，创建更平滑、更准确的动画。

以上是为什么我的 SVG 子元素动画从错误的原点开始？的详细内容。更多信息请关注PHP中文网其他相关文章！