我的<circle>在哪里？

Question

我想在circlesvg元素上创建一个简单的脉冲动画.我正在使用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属性值.

在这种情况下,您将使用以下值50% 50%:

更新的示例

.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%;
}

默认情况下,该值0 0位于svg元素上.参考:

CSS Transforms Module - 8 transform-origin属性

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