Tweet
Hallo zusammen,
ich bin leider ziemlicher Neuling was SVG angeht.
Folgende Grafik ist aus Handschriftdaten erstellt worden (nur zum Spaß hat sie den Effekt "Verblassen", ist also vernachlässigbar):
http://classicservice.bplaced.net/test2.svg
Den Code poste ich weiter unten.
Zielsetzung ist es, dass man diese Einzel-Koordinaten in einer einstellbaren Geschwindigkeit nacheinander erscheinen lässt, die vorherigen Punkte sollen stehen bleiben. Ganz einfach ausgedrückt: Es soll so aussehen, dass jemand auf dem Bildschirm schreibt. Wir arbeiten mit Handschriftaufzeichnungen und würden diese gerne mittels SVG darstellen.
Hat jemand eine Idee wie man das umsetzen könnte?
Vielen Dank vorab!
Grüße,
Dennis
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path stroke-linecap="round" d="M 77.65 13.1 L 77.65 12.8 L 77.65 12.5 L 77.65 12.25 L 77.65 12.05 L 77.65 11.75 L 77.65 11.55 L 77.65 11.35 L 77.55 11.15 L 77.4 10.95 L 77.25 10.7 L 77 10.55 L 76.85 10.45 L 76.6 10.4 L 76.3 10.3 L 75.95 10.25 L 75.4 10.15 L 74.75 10.15 L 73.95 10.15 L 72.95 10.15 L 71.65 10.15 L 70.25 10.65 L 68.6 11.45 L 66.65 12.5 L 64.45 13.7 L 62.05 15.05 L 59.55 16.55 L 57.05 18.05 L 54.75 19.5 L 52.5 21 L 50.3 22.65 L 48.1 24.45 L 45.9 26.45 L 43.65 28.65 L 41.45 30.95 L 39.35 33.5 L 37.25 36.1 L 35.1 38.95 L 32.9 41.95 L 30.6 45.05 L 28.35 48.2 L 26.1 51.45 L 23.9 54.8 L 21.8 58.2 L 19.75 61.5 L 17.8 64.8 L 15.95 68.1 L 14.3 71.4 L 12.85 74.8 L 11.55 78.35 L 10.55 81.9 L 9.7 85.5 L 9 89.2 L 8.45 92.9 L 8.15 96.6 L 8.05 100.25 L 8.05 103.65 L 8.05 106.75 L 8.5 109.65 L 9.25 112.25 L 10.1 114.75 L 11.1 117.2 L 12.2 119.3 L 13.4 121.4 L 14.8 123.2 L 16.4 124.85 L 18.2 126.35 L 20.15 127.55 L 22.25 128.6 L 24.55 129.35 L 26.95 129.8 L 29.55 129.85 L 32.3 129.85 L 35.2 129.65 L 38.3 128.6 L 41.6 127.15 L 45.2 125.45 L 49.05 123.35 L 53.1 121 L 57.3 118.35 L 61.4 115.4 L 65.45 112.15 L 69.25 108.7 L 72.95 105.2 L 76.6 101.5 L 80.15 97.9 L 83.45 94.3 L 86.35 90.85 L 88.7 87.5 L 90.45 84.2 L 91.5 81 L 91.95 78 L 91.95 75.2 L 91.55 72.9 L 90.2 71 L 88.25 69.4 L 86 68.35 L 83.2 67.9 L 80.05 67.9 L 76.6 68.3 L 73 70.1 L 69.45 72.5 L 66.05 75.35 L 63.15 78.35 L 60.9 81.35 L 59.35 84.1" stroke="blue" stroke-width="2" fill="none">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
</path>
</svg>
ich bin leider ziemlicher Neuling was SVG angeht.
Folgende Grafik ist aus Handschriftdaten erstellt worden (nur zum Spaß hat sie den Effekt "Verblassen", ist also vernachlässigbar):
http://classicservice.bplaced.net/test2.svg
Den Code poste ich weiter unten.
Zielsetzung ist es, dass man diese Einzel-Koordinaten in einer einstellbaren Geschwindigkeit nacheinander erscheinen lässt, die vorherigen Punkte sollen stehen bleiben. Ganz einfach ausgedrückt: Es soll so aussehen, dass jemand auf dem Bildschirm schreibt. Wir arbeiten mit Handschriftaufzeichnungen und würden diese gerne mittels SVG darstellen.
Hat jemand eine Idee wie man das umsetzen könnte?
Vielen Dank vorab!
Grüße,
Dennis
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path stroke-linecap="round" d="M 77.65 13.1 L 77.65 12.8 L 77.65 12.5 L 77.65 12.25 L 77.65 12.05 L 77.65 11.75 L 77.65 11.55 L 77.65 11.35 L 77.55 11.15 L 77.4 10.95 L 77.25 10.7 L 77 10.55 L 76.85 10.45 L 76.6 10.4 L 76.3 10.3 L 75.95 10.25 L 75.4 10.15 L 74.75 10.15 L 73.95 10.15 L 72.95 10.15 L 71.65 10.15 L 70.25 10.65 L 68.6 11.45 L 66.65 12.5 L 64.45 13.7 L 62.05 15.05 L 59.55 16.55 L 57.05 18.05 L 54.75 19.5 L 52.5 21 L 50.3 22.65 L 48.1 24.45 L 45.9 26.45 L 43.65 28.65 L 41.45 30.95 L 39.35 33.5 L 37.25 36.1 L 35.1 38.95 L 32.9 41.95 L 30.6 45.05 L 28.35 48.2 L 26.1 51.45 L 23.9 54.8 L 21.8 58.2 L 19.75 61.5 L 17.8 64.8 L 15.95 68.1 L 14.3 71.4 L 12.85 74.8 L 11.55 78.35 L 10.55 81.9 L 9.7 85.5 L 9 89.2 L 8.45 92.9 L 8.15 96.6 L 8.05 100.25 L 8.05 103.65 L 8.05 106.75 L 8.5 109.65 L 9.25 112.25 L 10.1 114.75 L 11.1 117.2 L 12.2 119.3 L 13.4 121.4 L 14.8 123.2 L 16.4 124.85 L 18.2 126.35 L 20.15 127.55 L 22.25 128.6 L 24.55 129.35 L 26.95 129.8 L 29.55 129.85 L 32.3 129.85 L 35.2 129.65 L 38.3 128.6 L 41.6 127.15 L 45.2 125.45 L 49.05 123.35 L 53.1 121 L 57.3 118.35 L 61.4 115.4 L 65.45 112.15 L 69.25 108.7 L 72.95 105.2 L 76.6 101.5 L 80.15 97.9 L 83.45 94.3 L 86.35 90.85 L 88.7 87.5 L 90.45 84.2 L 91.5 81 L 91.95 78 L 91.95 75.2 L 91.55 72.9 L 90.2 71 L 88.25 69.4 L 86 68.35 L 83.2 67.9 L 80.05 67.9 L 76.6 68.3 L 73 70.1 L 69.45 72.5 L 66.05 75.35 L 63.15 78.35 L 60.9 81.35 L 59.35 84.1" stroke="blue" stroke-width="2" fill="none">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
</path>
</svg>
Comment