Mozilla SVG Circle Flipping Path Demo und die Umkehrung seiner Beschreibung?
Posted: 03 Mar 2025, 22:37
Die Demo, die Mozilla für Clip -Pfad hat (auch unten als Referenz enthalten), sagt: < /p>
Nur der Teil des roten Herzens im Clip -Kreis ist sichtbar.
Wenn wir uns jetzt die Demo ansehen, die den Kreisradius von 0 bis 60px animiert, schließt das Herz den Kreis ab, anstatt das Herz zu dem Herzen, was das Demo beschreibt (sagt, dass die Demos -Intention ist). />
Nur der Teil des roten Herzens im Clip -Kreis ist sichtbar.
Code: Select all
< /code>
und es wird wie folgt verwiesen: < /p>
Code: Select all
html,
body,
svg {
height: 100%;
}
/* With a touch of CSS for browsers who *
* implemented the r Geometry Property. */
@keyframes openYourHeart {
from {
r: 0;
}
to {
r: 60px;
}
}
#myClip circle {
animation: openYourHeart 15s infinite;
}< /code>