我的<circle>去哪儿了？

Posted 2023-03-06

【中文标题】我的<circle>去哪儿了？

【英文标题】：Where's my <circle> going?

【发布时间】：2016-03-24 11:20:30

【问题描述】：

我希望在circle svg 元素上创建一个简单的脉冲动画。我正在使用transform: scale(..,..) 动画，但由于某种原因，它在其容器内移动整个圆圈，而不是简单地缩放元素本身。

这是动画：

animation: pulsate 2s infinite linear;

@keyframes pulsate 
    0% transform: scale(0.1, 0.1); opacity: 0.0;
    50% opacity: 1.0;
    100% transform: scale(1.2, 1.2); opacity: 0.0;

这是一个示例（包括应用于div 的相同动画，它会产生所需的结果）：

http://codepen.io/anon/pen/jWqVyb

关于如何创建这种效果的任何想法？圆圈可能位于svg 内的任何位置，并且需要保持该位置。

【参考方案1】：

您需要为您的圈子添加正确的变换原点：

circle 
  fill: #fff;
  transform-origin: 50px 50px;

html 中的transform-origin 有默认值50% 50%;，但在 SVG 中没有。

【参考方案2】：

您需要更改transform-origin property 的值。

在这种情况下，您将使用值50% 50%：

Updated Example

.beacon 
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0px 0px 2px 2px #fff;
    animation: pulsate 2s infinite linear;
  transform-origin: 50% 50%;

默认情况下，svg 元素上的值为 0 0。参考：

CSS Transforms Module - 8 The transform-origin Property

没有关联 CSS 布局框的 SVG 元素的默认值为 0 0。

【讨论】：

很棒的信息，我不知道 transform-origin 对于 svg 来说是特殊的

@aw04 是的，我不完全确定为什么。其他所有元素的默认值为 50% 50% 0。

SVG 规范（在 CSS 规范之前定义）没有变换原点的概念，缩放定义为缩放整个坐标系，这是一个非常简单的矩阵。对于标准人员来说，将 CSS 和 SVG 融合在一起是一项艰巨的任务。