Excellent! But wait - the beach!! OMG I’m so jealous!! No chance of even leaving our area in lockdown here …
In Cyprus we are allowed out twice a day, but we have to send an SMS to 8998 stating the reason (Excercise = “6”), id (passport or MEU3), Postcode. You receive an “Approved” SMS back within 10 seconds and can go out then “for an appropriate amount of time”). Luckily the beach s only 15mins walk away. You take your phone and ID with you in case the police stop you to check. Our cases are coming down again - now around 120 new cases per day.
I have fixed the bug and updated the utility on the website.
Regarding Copy-Paste, I have put in code that will select the new SVG source as soon as you Left Click in on the text itself. That way you can miss out the CTRL A and just do the CTRL C. This makes it less likely that you will accidentally select and copy other text as well.
1 Like
Fantastic. thank you. Interesting about the Cyprus way of manging the pandemic.
@elusien - I’m going to be a pain again.
OK, it worked. Woo hoo! Thank you.
But I noticed one thing.
Double-click the svg. Wait for 2 seconds. The red line starts. All fine.
But when I press the refresh icon in Chrome, after two seconds there’s a very brief moment when the red line appears in full just before the animation restarts.
It looks a tiny thing but my technique is to set the svg going, then start ShareX going, then refresh to capture just the animation, and the brief showing of the line ruins it.
Can this be addressed?
Map 03 animation with red line.zip (253.4 KB)
Thanks @elusien!
Evidemment la modification effectuée pour afficher la carte de @Jonray fait que la mienne n’est plus visible.
J’ai toutefois pu l’afficher à nouveau en modifiant la balise image
Obviously the modification made to display @Jonray’s map makes mine no longer visible.
However, I was able to display it again by modifying the image tag
Before modification
<image xlink:href="null" width="1280" height="720" transform="matrix(1,0,0,1,0,0)" elusien_href="7fa2122dad60.png"></image>
After modification
<image xlink:href="7fa2122dad60.png" width="1280" height="720" transform="matrix(1,0,0,1,0,0)"></image>
Trust you to find the thing I hoped I’d got a fudge for. Okay - the reason:
Say you want a delay of 2 seconds before the animation and you want the path to be animated, not just an icon. If I just program the SVG to “start the path animation after 2 seconds” it will show the full path for 2 seconds then animate it. Obviously I have to hide the path for those initial 2 seconds, and that is where the problem comes in.
To hide the path for 2 seconds I keyframe the “stroke-opacity”, from 0 to 1, starting at time 0 and lasting for 2secs. Again I can’t simply increase it linearly as it will slowly appear over the 2 seconds, so I use 3 keyframes: values=“0,0,1” and keytimes=“0,0.999,1”. this means that 2 milliseconds before the 2 second mark the full path will appear. This may well be captured by a single frame.
To try to get a better better effect I will change the duration of the animated opacity from 2 seconds to 2 sconds and 2 milliseconds, which will mean when the opacity becomes 1 it should be into the 1st or 2nd frame of the line animation, where the line is very very short. I’ll let you know when I’ve tested it out.
Concerning the xlink:href=“null” problem, I did not do a very good job fixing it. I will definitely fix it at the same time at the opacity fix (in the next hour).
LOL! Just wanted to keep you on your toes 
Depuis plusieurs jours j’essaie d’apprendre le svg par tutoriel sur internet.
J’ai compris votre explication sur les images clés.
J’ai eu le même problème sur un autre exemple d’animation, qui n’a rien à voir avec les itinéraires et dont je parlerai plus tard si j’arrive à créer quelque chose.
Je viens d’essayer sur votre code, et il semble que cela fonctionne.
J’ai remplacé la balise “animate” par la balise “set” pour cacher l’itinéraire pendant les 2 premières secondes
For several days I’ve been trying to learn svg by tutorial on the internet.
I understood your explanation about the key images.
I had the same problem on another example of animation, which has nothing to do with itineraries and which I will talk about later if I manage to create something.
I just tried it on your code, and it seems to work.
I replaced the “animate” tag by the “set” tag to hide the route for the first 2 seconds
<set id="Elusien0_hider" xlink:href="#Elusien0" class="hider" attributeName="stroke-opacity" value="0" begin="0s" dur="2s"></set>
Translated with www.DeepL.com/Translator (free version)
Thank you for that. I had forgotten about <set>, It’s a few years since I last used it and it slipped my mind. I will make the change to use it. In the meantime I have done the other changes which are now in the Web version of the utility. One point though: the reason the xlns:href worked sometimes and not others was because of the fact that I saved the data in an attribute called “Elusien_href”. It seems that the system sometimes converts this to lower-case “elusien_href” (it’s an XML thing).
Unfortunately there are several other attributes that have the word “Elusien” in them, as well as IDs. I have changed ALL OF THEM to lower-case.
This will mean that any SVGs that you have currently saved won’t work if you reload them in the web utility. Please edit any of these you have produced to change the string “Elusien” to “elusien” and they will work again. Sorry for that, but I thought that leaving things as they were would be a potential source of problems in the future.
Edit - Namna’s <set> change now added in the web version.
@namna, @elusien - that works for me too! Thank you! [EDIT] - just posted this at exactly the same time as the above post. [EDIT2] Oh no I didn’t, I just hadn’t refreshed the page and didn’t see it. Anyway, please ignore me.
Cela marche bien pour moi.
C’est génial, on peut même faire la course
It works well for me.
It’s great, you can even race.
SVG Elusien.html.txt (4.4 KB)
[Edit] Sorry, you have to put the map in the same folder than the html file
Hey, this is fun!
However I have one more highly annoying point for @elusien’s genius to deal with! 
THE CAR IS UPSIDE DOWN! (see the second animation in the video. View in full screen mode).
Can this be changed?
Yes, that’s because you are linking the image, not embedding it, and your image is a relative filename “map.png”, rather than an absolute (C:/abc/zyx/map.png)
PS by “highly annoying” I was referring to me being annoying, not @elusien. Also the music I used for the video was “Highway to Hell”, and in no way did I mean to suggest that Bristol is a bad place. 
Quite the contrary, it’s a lovely City.
There are several problems with the car, besides being upside it can drive in reverse, which is why the alien spaceship is better, because everyone knows that they can fly any which way!
Seriously though I don’t think it is possible. This is a single (unicode) character that is animated along a path. I have tried several options, but haven’t (yet) come up with one that works.
It has been mentioned that “reversing the path”, which Inkscape can do, will flip it the right-way up, but then I suspect it will drive from Bristol to London, in reverse gear!
2 Likes
Dans le tutoriel que j’étudie, ils y arrivent, mais la voiture n’est pas un caractère, elle est dessinée et l’animation utilise “animateMotion” et “mpath” au lieu de “animate” et “path”
Je ne suis pas encore arrivé à ce niveau
In the tutorial I’m studying, they do, but the car is not a character, it is drawn and the animation uses “animateMotion” and “mpath” instead of “animate” and “path”.
I have not yet reached this level
1 Like
Thank you @elusien and @namna, not to worry. I could always fit some wheels on the roof!! 
This is a really useful tool and I have no idea whatsoever how you dreamed it up, @elusien. My description of you as a genius stands. 
Actually I can see artistic potential in this other than animated routes - eg animated drawings with paths? Hmm, maybe one day I will give it a try…
1 Like
Moi aussi, cela m’a donné envie, voilà ou j’en suis
Me too, it made me want to, here’s where I am 
1 Like
That’s really great. Lots of potential!
C’est vraiment très bien. Beaucoup de potentiel!