Path: csiph.com!news.mixmin.net!eternal-september.org!feeder3.eternal-september.org!news.eternal-september.org!.POSTED!not-for-mail
From: Janis Papanagnou <janis_papanagnou+ng@hotmail.com>
Newsgroups: de.comp.lang.javascript
Subject: Re: animierte Linie
Date: Wed, 22 Nov 2023 05:49:04 +0100
Organization: A noiseless patient Spider
Lines: 35
Message-ID: <ujk181$178fc$1@dont-email.me>
References: <ujhml3$2pbt0$1@gwaiyur.mb-net.net> <ujhviu$pkaj$1@dont-email.me> <ujibc3$2qls6$2@gwaiyur.mb-net.net>
MIME-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 8bit
Injection-Date: Wed, 22 Nov 2023 04:49:05 -0000 (UTC)
Injection-Info: dont-email.me; posting-host="5fed2192fdbf07e7d5f7221a01745de7"; logging-data="1286636"; mail-complaints-to="abuse@eternal-september.org";	posting-account="U2FsdGVkX1/2tWVRn4x7ifabh6w9qr6H"
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:45.0) Gecko/20100101 Thunderbird/45.8.0
Cancel-Lock: sha1:ToqdYbJnw5YYgGSAOCYs/AH8tkQ=
In-Reply-To: <ujibc3$2qls6$2@gwaiyur.mb-net.net>
X-Enigmail-Draft-Status: N1110
X-Mozilla-News-Host: news://news.eternal-september.org
Xref: csiph.com de.comp.lang.javascript:5458

On 21.11.2023 14:29, Jan Novak wrote:
> Am 21.11.23 um 11:08 schrieb Janis Papanagnou:
>> Solch einfache Animationen, wie du sie beschreibst, würde ich manuell
>> mit SVG formulieren; ist nicht viel Aufwand. Hier ein Beispiel mit nur
>> einem Punkt auf einem Balken:
>>[...]
> 
> Genau sowas suche ich. Mehr brauch ich gar nicht. Leider habe ich es
> nicht hinbekommen, dass die Punkte von links alle 40 Pixel erscheinen
> und rechts verschwinden (also nicht zurück springen)
> Das ist mein erster Ansatz, vielleicht kannst du mir noch nen Tip geben.

Ich bin bei dem Thema leider kein Fachmann; das Beispiel hatte
ich auch nur mal schnell zusammgestellt. Els Tipp: siehe unten.

> [...]
> 
> Der erste Punkt fängt zu spät an und geht über den Balken hinaus.
> Ich hätte gerne fortlaufende Punkte von links nach recht.

Ich hatte bei meinem Beispiel die Koordinaten geeignet angepasst.

Man das könnte sicherlich auch über ein Cropping mittels viewBox
leisten, aber sauberer wäre schon, wenn man die Koordinaten der
Objekte entsprechend konsistent definiert.

Was mir an deinem Code auffält, ist, dass du einen Balken mit
width=200 definiert hast, der zweite deiner beiden circle animates
aber Werte über 200 definiert. Wenn das also dazu führt, dass
Punkte über das rectangle hinauswandern, so wundert es mich nicht.
Gleiches für den Punkt, der bei dir nicht wie das rectangle bei 0
anfängt sondern erst bei 20. :-)

Janis