SVG交互设计—双重触发

首页 / SVG交互🎠 / 正文

利用触发时间差实现「双重触发」
clik 的触发有0.02-0.03秒的延迟,而 touchstart 是点击就触发,利用这个时间差就可以实现双重触发

参考代码

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 800 1000" enable-background="new 0 0 800 1000" xml:space="preserve">
<g id="底层">
    <animate attributename="opacity" begin="click" values="1;0;1" repeatcount="indefinite" fill="freeze" dur="2s"></animate>
    <rect x="241.5" y="21.9" fill="#46AFFD" width="540.6" height="379.1"></rect>
</g>
<g id="顶层">
    <animatetransform attributename="transform" type="translate" values="0 0;-245 0" dur="0.01s" begin="touchstart" fill="freeze" ></animateTransform>
        <rect  x="24" y="85.1" fill="#59C2A6" width="450.2" height="252.6"></rect>
</g>
</svg>
SVG
打赏
评论区
头像
    头像
    Taniszyc