SVG交互设计—防误触

首页 / SVG交互🎠 / 正文

方法一:遮罩法

<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
打赏
评论区
头像
    头像
    crexmkwzfj
      

    这篇文章不错!

    头像
    oixrftiihz
      

    全球视野与本土实践结合恰到好处。

    头像
    libyzvlqra
      

    建议补充性能优化方案,增强实用性。

    头像
    fftcjnkeqw
      

    ?技术类评语?

    头像
    ussfxvxolm
      

    建议引入反面案例,增强辩证性。