Question

我试图在svg图形中设置一个圆形动画，以增加其自身中心点的大小。

这是我的svg：

<svg version="1.1" class="p-svg-pulse" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve">
    <circle class="pulse" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" cx="40" cy="40" r="10"/>
    <circle class="halo" fill="none" stroke="#FF9C00" stroke-miterlimit="10" cx="40" cy="40" r="21"/>
    <circle class="center" fill="#FF9C00" cx="40" cy="40" r="12"/>
</svg>

我尝试过动画缩放比例，但是我无法保持中心点。

Live example

PS。我试图不使用js来解决这个问题，因为它会给我的代码增加许多不必要的复杂性。

Answer 1

如果其他人感兴趣，我最终通过使用矩阵变换和动画笔画宽度来解决问题，以保持近似的大小。

@-webkit-keyframes svg_pulse {
     0% {
        -webkit-transform: matrix(1,0,01,0,0);
        stroke-width: 1;
        opacity: 1;
     }

     50% {
        opacity: 1;
     }
     100% {
        -webkit-transform: matrix(4,0,0,4,-120,-120);
        stroke-width: 0.25;
        opacity: 0;
     }
}

.p-svg-pulse .pulse {
    -webkit-animation: svg_pulse 3s ease;
    -webkit-animation-iteration-count: infinite;
}

Live example

Answer 2

使用transform-origin为缩放提供中心点。

或者用gx翻译每个圆圈，用cx进行平移，然后删除圆圈cx和cy属性，使每个圆圈围绕其本地原点绘制。

如何使用css为svg圈设置动画

2 个答案: