it-swarm.com.ru

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

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

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

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

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

styling.css:

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

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

index.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
Nathan Russell

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

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

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

Анимации 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>

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

9
Robert Longson

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

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>

5
Evgeny

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