我的<circle>在哪里？

我期待在circle svg元素上创建简单的脉动动画。我使用的是动画transform: scale(..,..)，但由于某种原因，它将整个圆圈移动到其容器中，而不是简单地缩放元素本身。我的<circle>在哪里？

这里的动画：

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内的任何位置，因此需要保持此位置。

来源

2015-12-17 aw04

您需要更改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%; 
}

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

CSS Transforms Module - 8 The transform-origin Property

对于没有相关的CSS布局框SVG元素的默认值是0 0。

来源

2015-12-17 20:50:49

伟大的信息，我不知道转换的起源是特别为svg – aw04

@ aw04是的，我不完全确定*为什么*。每个其他元素的默认值是'50％50％0'。 –

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

您需要添加适当的变换起源于你的圈子：

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

变换起源于HTML有默认值50% 50%;但不是在SVG。

来源

2015-12-17 20:57:24

我的<circle>在哪里？

回答

相关问题