Tutorial Video
> StartDieses Tutorial zeigt, wie Kreise, Linien und Kurve gezeichnet und animiert werden können. Die erstellten SVG Zeichnungen können als Text kopiert oder mit Hilfe des Download-Button in einen neuen Browser-Tab geladen werden.
Bewegen Sie einen Datenpunkt
<svg height="420" width="620"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<image x="70" y="130" width="166" height="205" preserveAspectRatio="none" xlink:href="http://mgje.github.io/draw/images/biber.png" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<animate attributeType="XML" begin="click" attributeName="x" from="70" to="630" dur="1.3s" fill="freeze"></animate>
<animate attributeType="XML" begin="click" attributeName="y" from="130" to="630" dur="2.3s" fill="freeze"></animate>
<animate attributeType="XML" begin="click" attributeName="width" from="166" to="398.4" dur="3.3s" fill="freeze"></animate>
<animate attributeType="XML" begin="click" attributeName="height" from="205" to="68.33333333333333" dur="3.3s" fill="freeze"></animate>
<animateTransform begin="click" attributeType="XML" attributeName="transform" type="rotate" from="0 153 232" to="359.9 153 232" repeatCount="indefinite" additive="sum" dur="3.3s" fill="freeze"></animateTransform>
<animateMotion path="m-50,0 q150,150, 260,0 q150,-240 260,0" repeatCount="indefinite" begin="click" dur="2.3s" fill="freeze"></animateMotion>
</image>
</svg>
Alle Inhalte (Programme) sind auf Github veröffentlicht und stehen unter der CC BY 3.0 CH Lizenz.
