spent some hours to achieve the following and after another several hours of troubleshooting and searching i thought maybe some genius among you has a solution for my problem (:
as the title says i'd like to animate a svg clippath by changing the path's d attribute inside. setup would look like this:
<svg><clippath>
<path d="M...s...l... ...z">
<animate attributeName="d"
from="initial" to="some new path" dur="Xs" begin="trigger"/>
</path></clippath></svg>
And on some trigger (e.g. press button) the animation should start. beside many other desperate tries what worked to some extend was beginElement. the problem was the animation itself. the path changed its shape, but without any animation. (js and css animation tricks didn't work either)
my question: is there a way to animate a morphing clippath?
EDIT: Sorry totally forgot about that. It works when I apply the clipping to anything except the mapbox map (neither mapbox-gl canvas nor map container div). Clipping and changing path works tho, but no animation. As soon as I have the time I'll provide an example.
FYI: the final goal is to clip/mask a mapbox gl map dynamically. since the map is a canvas element i also tried some canvas clipping which sadly doesn't work when the canvas element is a child of a container div which is the case by default with mapbpx gl and there is no way to change that (already contacted their dev team). since mapbox and especially the gl version is fairly new there might be a solution for this problem in the somewhat future. if anybody has an idea to clip a whole mapbox map and not only a layer would be cool if you could share your thoughts!
if someone has a solution for the android sdk of mapbox instead of the web version this would also work :)
many thanks in advance! (i can provide more information if it's necessary)
