web-dev-qa-db-fra.com

Redimensionnement du rayon de cercle SVG à l'aide d'une animation CSS

J'essaie d'animer l'attribut radius d'un cercle SVG avec CSS. Bien que (à l'aide de l'outil Firefox Inspect Element), je puisse voir que l'animation elle-même est configurée et fonctionne correctement, la taille de ".innerCircle" ne change pas visiblement.

Si vous pouviez repérer tout ce qui me manquait de toute évidence, ou aider de quelque manière que ce soit, je vous en serais très reconnaissant. Je suis plutôt nouveau dans ce domaine, alors si je me suis trompé, soyez gentil!

J'ai collé mes fichiers ci-dessous pour référence.

Merci encore.

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>
htmlcsssvgcss-animations
8
Nathan Russell

En SVG 1.1, le rayon d'un cercle est un attribut et non un propriété CSS .

Les animations CSS animent les propriétés CSS et non les attributs.

Il s’agit essentiellement de votre problème, de sorte que les animations CSS ne fonctionnent pas pour le moment sur les attributs de Firefox ou de Safari. Si vous aviez choisi une propriété CSS telle que l'opacité, le remplissage ou le contour, tout se serait bien passé.

Les animations SMIL fonctionneront sur les attributs (et les propriétés CSS) de ces agents utilisateurs.

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

Il existe une solution à l'horizon, car la prochaine spécification SVG 2 inachevée suggère que la plupart des attributs deviennent des propriétés CSS (principalement parce que les cas d'utilisation tels que le vôtre ne fonctionnent pas). Chrome l'a déjà implémenté pour vérifier si c'est possible, c'est pourquoi votre animation y fonctionne. À l'avenir, Firefox et Safari pourraient également implémenter cette fonctionnalité SVG 2.

9
Robert Longson

Il existe une alternative simple: animer la taille de l'élément au lieu du rayon du cercle.

Les animations SMIL sont obsolètes et ne sont prises en charge par les navigateurs que pour des raisons héritées. Il sera peut-être supprimé à l'avenir et n'apparaîtra jamais dans Edge ou dans certains navigateurs futurs.

@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

Si quelqu'un cherche encore à faire cela, j'ai trouvé une très bonne solution pour un cercle rempli sans utiliser SMIL. Cette solution est un peu un bidouillage, et cela ne fonctionnera que pour les cercles qui ont un remplissage solide. Ce que j'ai essentiellement fait, c’est d’animer la largeur de trait de ces cercles pour leur donner l’impression d’une croissance. 

Mon cercle d'origine 

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

Pour que cela fonctionne, je règle le rayon du cercle comme étant proche de 0. 

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

Définissez ensuite une largeur de trait égale au double du rayon d'origine, puis définissez l'animation de la largeur du trait. 

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

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