Изменение радиуса круга SVG с помощью анимации CSS

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

я вставил свои файлы ниже для ссылка.

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

стилизация.css:

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

.innerCircle {
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: buttonTransition;
}
.HTML-код: 
<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>
8
css css-animations html svg

3 ответов

в SVG 1.1 радиус окружности равен атрибут, а не свойства CSS.

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

это в основном ваша проблема, поэтому вы не получите CSS-анимации для работы с атрибутами в Firefox или Safari в настоящее время. Если бы вы выбрали свойство CSS, такое как непрозрачность, заливка или штрих, вы были бы в порядке.

анимация SMIL будет работать с атрибутами (и свойствами CSS) на тех UAs, хотя.

<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>

на горизонте есть решение, хотя, поскольку предстоящая незавершенная спецификация SVG 2 предполагает, что большинство атрибутов становятся свойствами CSS (в основном потому, что такие случаи использования, как ваш, не работают). Chrome уже реализовал это, чтобы проверить, возможно ли это, поэтому ваша анимация работает там. В какой-то момент в будущем Firefox и Safari также могут реализовать эту функцию SVG 2.

9

есть простая альтернатива: анимировать масштаб элемента вместо радиуса окружности.

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>
4

Если кто-то все еще ищет, как это сделать, я нашел довольно хорошее решение для заполненного круга без использования 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;
}
0