Größenänderung SVG Kreisradius Mithilfe von CSS-Animation

Ich versuche zu animieren, einen SVG-Kreis-radius-Attribut mit CSS. Während (mit dem Firefox-Element Untersuchen-tool) kann ich sehen, dass die animation selbst eingerichtet ist und ordnungsgemäß ausgeführt wird, die Größe der ".innerCircle" nicht sichtbar verändern.

Wenn Sie Sie vor Ort alles, was ich habe offensichtlich verpasst, oder Hilfe in irgendeiner Art wäre ich sehr dankbar. Ich bin ziemlich neu hier, also wenn ich gegangen über dies falsch ist, bitte freundlich sein!

Habe ich eingefügt, meine Dateien unterhalb der Referenz.

Nochmals vielen Dank.

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>

InformationsquelleAutor Nathan Russell | 2015-09-05

10

In SVG 1.1 der radius eines Kreises ist ein Attribut und nicht ein CSS-Eigenschaft.

CSS-Animationen animieren von CSS-Eigenschaften und-nicht animiert-Attribute.

Das ist im Grunde Ihr problem, so dass Sie nicht mit CSS Animationen zu arbeiten, die auf Attribute, auf Firefox oder Safari aktuell. Wenn Sie möchten, gewählt, eine CSS-Eigenschaft wie opacity, fill oder stroke, du würdest in Ordnung.

SMIL-Animationen funktionieren auf Attribute (und die CSS-Eigenschaften) auf diesen UAs-obwohl.

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">
              <animate attributeName="r" begin="0s" dur="1s" repeatCount="indefinite" from="5%" to="25%"/>
            </circle>
        </svg>
    </body>
</html>
```
Es ist eine Lösung in Sicht, obwohl für die kommende unfertig SVG 2-Spezifikation schlägt vor, dass die meisten Attribute werden CSS-Eigenschaften (vor allem, weil Anwendungsfälle wie deins funktioniert nicht). Chrome implementiert hat, wird dies bereits, um zu überprüfen, ob Ihre möglich, die ist, warum Ihre animation funktioniert es. Irgendwann in der Zukunft dann, Firefox und Safari zu implementieren, die das SVG-2-Funktion zu.
- "SVG-die SMIL-Animationen (<animieren>, <set> usw.) sind veraltet und werden entfernt. Bitte verwenden Sie CSS-Animationen oder Web-Animationen statt." -meine Konsole
- vermutlich in Zukunft Chrome update entfernen, die deprecation-Warnung, wie Sie haben Ihre Meinung geändert.
- Ernsthaft? Ich habe einiges geschafft, der svg mit der Idee, nicht in der Lage zu verwenden <animieren> und es ist rau. Also Tat ich das alles für nichts?
- 'fraid so. stackoverflow.com/questions/40995387/...
- wow. danke für den link
InformationsquelleAutor Robert Longson
6

Gibt es eine einfache alternative: animate-element scale-statt des Kreis-radius.

SMIL-Animationen ist veraltet und wird nur unterstützt von den Browsern für legacy-Gründen. Es kann gelöscht werden, in der Zukunft und wird nie erscheinen, im Rand oder einige zukünftige Browser.

CSS:
```
@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:
```
<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>
```
- SMIL-animation ist möglicherweise veraltet, aber zumindest gibt es ein polyfill für IE für es. Es gibt keine polyfill für CSS-Animationen im IE, die ich kenne.
- Es ist 2017. Wer kümmert sich um den IE? Edge wird bald überholen es in der Popularität. Neben -, CSS-animation ist IE10+ und niemand unterstützt IE unter 11 in diesen Tagen.
- Keine version von IE unterstützt CSS-Transformationen auf SVG-Elemente und nach dieser es ist nicht unterstützt in Rand entweder.
- Das ist eine echte Enttäuschung. Kreis gefälscht werden kann mit border-radius, in diesem speziellen Fall. Im Allgemeinen, SVG ersetzt werden kann, mit backup-png-Bild für den IE nur dann die Animation verwandelt
- Sah einfach in Ihr Profil. Was ist der deal mit Firefox-transform-origin nicht auf SVG-Elemente? Es ist sehr, sehr ärgerlich. Chrome bekommt es richtig
- Chrome bekommt es falsch. Es gibt eine Spezifikation für das, Firefox implementiert es, wie geschrieben, Chrome implementiert seine eigene Sache. Wenn Sie denken, dass Chrome ist dabei die "richtige" Sache ist, dann sollten Sie sich w3c, die Spezifikationen zu ändern, wenn das w3c hat, dass wir würden zu ändern, zu entsprechen, Chrom.
- In anderen Worten, es ist politisch. Wenn genug LF implementieren es rechts anstatt nach was verwechselt spec w3c veröffentlicht, werden Sie gezwungen sein, es zu beheben.
- Mit w3c, raise einen Fehler oder einen Kommentar auf der entsprechenden w3c-mailing-Liste. Wie ich schon sagte, wenn sich die Spezifikation ändert, so werden wir.
- href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box" > "transformieren" -Feld ist die Lösung und es ist noch im Entwurf?
- Und so schnell wie Chrome und der Spezifikation, richten wir versenden unsere Implementierung von transform-box.
InformationsquelleAutor Evgeny
1

Falls jemand noch auf der Suche, wie dies zu tun, fand ich eine ziemlich gute Lösung für einen gefüllten Kreis ohne Verwendung von SMIL. Diese Lösung ist ein bisschen ein hack und es funktioniert nur für Kreise, die eine Feste Füllung in Ihnen. Im wesentlichen, was ich Tat, war zu animieren, die Strichstärke der Kreise zu erscheinen, als ob Sie wachsen.

Meine ursprüngliche Kreis
```
<circle cx="46" cy="46" r="2.8"/>
```
Für diese Arbeit habe ich den radius des Kreises zu sein, nahe sein, nahe 0.
```
<circle cx="46" cy="46" r="0.01"/>
```
Dann einen Schlaganfall-Breite die doppelte Höhe des ursprünglichen radius, und schließlich-setup die animation von stroke-width.
```
@keyframes circle_animation {
    from {
        stroke-width: 0;
    }
}

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

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.