方法一:遮罩法
<rect x="" y="" fill="" fill-opacity="0" width="" height=""></rect>
方法二
设置较长的<dur>
,通过<keyTimes>
来控制动画播放的真实时间。适用嵌套动画,例如在触发第二层动画时,为了不让第一层动画重复触发,可以给外层动画添加restart="never"
,但在苹果手机上restart="never"
会被强制转换成restart="WhenNotActive"
,即播放完成之后再次点击还是会重启,所以可伪装这个动画未结束。
<animate attributeName="opacity" begin="click" calcMode="discrete" fill="freeze" restart="never" values="0;1;1" keyTimes="0;0.001;1" dur="1000s" >
</animate>
方法三:设置<pointer-events>
首先给整个svg画布设置"pointer-events:none"
(可穿透,即不可点击),然后在需要被点击的区域设置"pointer-events:visible"
<rect x="" y="" fill="" opacity="0" width="" height="" style="pointer-events:visible;"></rect>
svg大法好