为什么我的 SVG 子元素从左上角而不是中心开始缩放？

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

尝试缩放 SVG 中的子元素时，用户可能会遇到与变换原点。具体来说，原点根据整个 SVG 而不是子元素的中心设置为 (0,0)。此行为使动画看起来是从左上角“飞入”，而不是从所需元素的中心缩放。

要解决此问题并设置相对于要进行动画处理的特定元素的变换原点，需要使用 Transform-需要包含 box 属性。通过将其设置为“fill-box”，变换原点将绑定到子元素的尺寸：

<code class="css">#animated-box {
  transform-box: fill-box;
  animation: scaleBox 2s infinite;
}</code>

此修改可确保子元素（在本例中为动画框）缩放从它自己的中心开始，而不是整个 SVG 的起源。

以上是为什么我的 SVG 子元素从左上角而不是中心开始缩放？的详细内容。更多信息请关注PHP中文网其他相关文章！