plane icon Welcome to Microsoft Flight Simulator’s SDK Q&A Platform!

You have questions regarding the SDK? DevMode Tools? SimConnect? You would like to submit an idea for future improvements, seek help or exchange knowledge? You’re in the right place.

In the upcoming flighting, we've changed the behaviour of the content.xml file. If your addon uses this file, please read this article!

Please take a moment to read the platform’s guidelines before you get started!


shiwan avatar image
shiwan asked shiwan edited

SVG-path animate-tag

I'm trying to define a SVG path-animation to have a dynamic clip-path but I am not able to get it running. This is my current implementation:

  <clipPath id="clipping">
        keyTimes="0; 0.5; 1"
        values="M 492 492 L 492 0 L 492 0 L 492 0 L 492 0 z;
                M 492 492 L 984 0 L 984 0 L 0 0 L 0 0 z;
                M 492 492 L 984 492 L 984 0 L 0 0 L 0 492 z"
<image clip-path="url(#clipping)" x="0" y="0" width="984" height="492" xlink:href="http://URL_TO_IMAGE" />

The path is animated if repeatCount is indefinite, but all other values result in a transition directly to the last path-definition without any animation.

Additionally does it look like the begin-attribute does not effect the starting point. I changed the value to extreme numbers (i.e. 20 seconds) and the starting point was every time the same.

An other issue is that it seems like the animation-states do not reset if the element is removed from the HTML-code. My code dynamically adds and removes the defs-tag and the corresponding clipPath and add it only when needed. It looks like the animation states are only reset, if the defs-tag, etc. are removed for more than 30 seconds from the HTML-code. Otherwise looks it like the counters are updated internally and if the tags reapear, the animation is shown somewhere in the middle.

One last issue is that the first run of the animate-tag is not shown from the first frame. It is visualized after round about 20% of the complete animation-definition. I assumed some internal delays, but an increased duration shows the same results. I increased the duration to 20 seconds for a test run.

This following video shows the current version with the reported problems:

What am I doing wrong or are these bugs inside the webkit-rendering-code?
Can you show me the correct way to implement this dynamic clipping?

nd-issues.mp4 (584.9 KiB)
10 |10000

Up to 5 attachments (including images) can be used with a maximum of 4.8 MiB each and 23.8 MiB total.

0 Answers


Write an Answer

Hint: Notify or tag a user in this post by typing @username.

Up to 5 attachments (including images) can be used with a maximum of 19.1 MiB each and 23.8 MiB total.