Mozilla SVG Circle Flipping Path Demo und die Umkehrung seiner Beschreibung? ⇐ HTML

[Anonymous]

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.

Code: Select all

  



< /code>
und es wird wie folgt verwiesen: < /p>
  

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). />

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>