Как мне оживить круг svg с помощью css

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 для предоставления центральной точки для масштабирования.

Альтернативно, оберните каждый круг в g, который переводит cx, cy и удаляет атрибуты окружности cx и cy, чтобы каждый круг рисовался вокруг его локального начала.