Изменение размера окружности SVG с использованием анимации CSS

Я пытаюсь анимировать атрибут радиуса круга SVG с помощью CSS. Хотя (с помощью инструмента Firefox Inspect Element) я вижу, что сама анимация настроена и работает правильно, размер ".innerCircle" не изменяется заметно.

Если вы заметите что-то, что я явно пропустил, или поможете, я был бы очень признателен. Я новичок в этом, поэтому, если я ошибся, пожалуйста, будьте добры!

Я вставил свои файлы внизу для справки.

Еще раз спасибо.

@keyframes buttonTransition {
  from {
    r: 5%;
  }
  to {
    r: 25%;
  }
}

.innerCircle {
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: buttonTransition;
}

<html>
  <head>
    <link href = "styling.css" rel = "stylesheet" type = "text/css"></link>
  </head>
  <body>
    <svg class = "button" expanded = "true" height = "100px" width = "100px">
      <circle cx = "50%" cy = "50%" r = "35%" stroke = "#000000" stroke-width = "10%" fill = "none"/>
      <circle class = "innerCircle" cx = "50%" cy = "50%" r = "25%" fill = "#000000"/>
    </svg>
  </body>
</html>

Ответ 1

В SVG 1.1 радиус круга является атрибутом, а не CSS-свойством.

CSS-анимация анимирует свойства CSS и не анимирует атрибуты.

Firefox теперь реализовал эту часть спецификации SVG 2, поэтому тестовый пример в вопросе теперь будет работать, хотя он не работал, когда вопрос был написан.

Анимации SMIL будут работать с атрибутами (и свойствами CSS) этих UA.

<html>
    <head>
        <link href = "styling.css" rel = "stylesheet" type = "text/css"></link>
    </head>
    <body>
        <svg class = "button" expanded = "true" height = "100px" width = "100px">
            <circle cx = "50%" cy = "50%" r = "35%" stroke = "#000000" stroke-width = "10%" fill = "none"/>
            <circle class = "innerCircle" cx = "50%" cy = "50%" r = "25%" fill = "#000000">
              <animate attributeName="r" begin="0s" dur="1s" repeatCount="indefinite" from="5%" to="25%"/>
            </circle>
        </svg>
    </body>
</html>

Ответ 2

Есть простая альтернатива: масштабировать анимированный элемент вместо радиуса круга. По состоянию на 2018 г. он поддерживается в Edge и во всех современных браузерах.

SMIL-анимация устарела и поддерживается только браузерами по устаревшим причинам. Он может быть удален в будущем и никогда не появится в Edge или некоторых будущих браузерах.

@keyframes buttonTransition {
    from {
        transform: scale(0.2);
    }
    to {
        transform: scale(1);
    }
}

.innerCircle {
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: buttonTransition;
    transform-origin: center center;
}

<html>
    <head>
        <link href = "styling.css" rel = "stylesheet" type = "text/css"></link>
    </head>
    <body>
        <svg class = "button" expanded = "true" height = "100px" width = "100px">
            <circle cx = "50%" cy = "50%" r = "35%" stroke = "#000000" stroke-width = "10%" fill = "none"/>
            <circle class = "innerCircle" cx = "50%" cy = "50%" r = "25%" fill = "#000000"/>
        </svg>
    </body>
</html>

Ответ 3

Если кто-то все еще ищет, как это сделать, я нашел довольно хорошее решение для заполненного круга без использования SMIL. Это решение немного взломано, и оно будет работать только для кругов, которые имеют сплошное заполнение. По сути, я сделал анимацию ширины штрихов этих кругов, чтобы они выглядели так, как будто они растут.

Мой первоначальный круг

<circle cx="46" cy="46" r="2.8"/>

Для этого я устанавливаю радиус круга близко к 0.

<circle cx="46" cy="46" r="0.01"/>

Затем установите ширину хода в два раза больше исходного радиуса и, наконец, настройте анимацию ширины хода.

@keyframes circle_animation {
    from {
        stroke-width: 0;
    }
}

circle {
    stroke-width: 5.6;
    animation: circle_animation .5s linear infinite;
}