css - 我的 要去哪里？

Question

我想在 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 中的任何位置，并且需要保持该位置。

Answer 1

您需要更改 transform-origin property值(value)。

在这种情况下，您将使用值 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

The default value for SVG elements without associated CSS layout box is 0 0.