Animierter Farbkreis mit Mouseover Ereignis

Den Farbkreis mit seinen 13 Teilstücken habe ich in Illustration gezeichnet, coloriert und als SVG exportiert.

See the Pen SVG animated sliced color circle with mouseover event by Norbert Mesch (@itsnorbat) on CodePen.

Animation des Kreissegments

Jedes Kreiselement ist mit einem animateTransform-Element versehen worden um das Kreissegment wenige Pixel aus dem Kreis heraus zu animieren. Das Ereignis wird mittels mouseover ausgelöst.

<animateTransform attributeName="transform" type="translate" from="0 0" to="-5 -20" begin="mouseover" dur="0.3s" repeatCount="1" fill=""/>

Rotation

Die Rotation des Kreises wurde ebenfalls mit einem animateTransform-Element (type=“rotate“) realisiert.

<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360,200,200" to="0,200,200" begin="0s" dur="13s" repeatCount="indefinite"/></g>