花了几个小时来实现以下目标,经过几个小时的故障排除和搜索后,我想也许你们中间有一些天才能解决我的问题(:
正如标题所说,我想通过更改内部路径的d属性来设置svg clippath的动画。设置看起来像这样:
<svg><clippath>
<path d="M...s...l... ...z">
<animate attributeName="d"
from="initial" to="some new path" dur="Xs" begin="trigger"/>
</path></clippath></svg>
在某些触发器上(例如按下按钮),动画应该开始。除了许多其他绝望的尝试,在某种程度上起作用的是beginElement。问题是动画本身。路径改变了它的形状,但没有任何动画。 (js和css动画技巧也不起作用)
我的问题:有没有办法让变形clippath动画?
编辑:抱歉完全忘了这件事。当我将剪辑应用于除mapbox地图之外的任何东西(mapbox-gl canvas和map container div)时,它都有效。剪切和更改路径工作,但没有动画。只要我有时间,我就会提供一个例子。
仅供参考:最终目标是动态剪辑/屏蔽地图框gl地图。由于地图是一个画布元素,我也尝试了一些画布剪辑,当canvas元素是容器div的子元素时默认不起作用,默认情况下使用mapbpx gl并且没有办法改变它(已经联系过)他们的开发团队)。因为mapbox特别是gl版本相当新,所以在未来的某个时候可能会有解决这个问题的方法。如果有人想要剪辑整个地图集地图,那么如果你能分享你的想法,不仅只有一层很酷!
如果某人有mapbox的android sdk而不是web版本的解决方案,那么这也可行:)
非常感谢提前! (如果有必要,我可以提供更多信息)