Question

我使用了一个HTML代码在网站上制作文字故障，但是我只需要每10秒钟就会发生一次动画故障，因为此刻它有点疯狂。

我遇到的问题是如何使用JS setInterval(html, 10000)重新执行html代码。这甚至可能吗？谢谢！

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg">
<script>
    var html = '<defs>';
    html += '<filter id="glitch" x="0" y="0">';
    html += '<feColorMatrix in="SourceGraphic" mode="matrix" values="1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" result="r" />';
    html += '<feOffset in="r" result="r" dx="-5">';
    html += '<animate attributeName="dx" attributeType="XML" values="0; -5; 0; -18; -2; -4; 0 ;-3; 0" dur="0.2s" repeatCount="indefinite" />';
    html += '</feOffset>';
    html += '<feColorMatrix in="SourceGraphic" mode="matrix" values="0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0" result="g"/>';
    html += '<feOffset in="g" result="g" dx="-5" dy="1">';
    html += '<animate attributeName="dx" attributeType="XML" values="0; 0; 0; -3; 0; 8; 0 ;-1; 0" dur="0.15s" repeatCount="indefinite" />';
    html += '</feOffset>';
    html += '<feColorMatrix in="SourceGraphic" mode="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0" result="b"/>';
    html += '<feOffset in="b" result="b" dx="5" dy="2">'
    html += '<animate attributeName="dx" attributeType="XML" values="0; 3; -1; 4; 0; 2; 0 ;18; 0" dur="0.35s" repeatCount="indefinite"/>';
    html += '</feOffset>';
    html += '<feBlend in="r" in2="g" mode="screen" result="blend" />';
    html += '<feBlend in="blend" in2="b" mode="screen" result="blend" />';
    html += '</filter>';
    html += '</defs>';
</script></svg>

Answer 1

你不需要setInterval() - 它可以在SVG动画中完成。遵循概述here的策略，制作一个＆＃34;虚拟＆＃34;动作元素什么都不做，并将其他动画的开头/结尾绑定到它：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

  <defs>
    <animateTransform begin="myGlitch.end" id="pause" dur="10s" type="translate" attributeType="XML" attributeName="transform" />
    <filter id="glitch" x="0" y="0">
      <feColorMatrix in="SourceGraphic" mode="matrix" values="1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" result="r" />
      <feOffset in="r" result="r" dx="-5">
        <animate attributeName="dx" attributeType="XML" values="0; -5; 0; -18; -2; -4; 0 ;-3; 0" dur="0.2s" begin="0; pause.end" />
      </feOffset>
      <feColorMatrix in="SourceGraphic" mode="matrix" values="0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0" result="g" />
      <feOffset in="g" result="g" dx="-5" dy="1">
        <animate attributeName="dx" attributeType="XML" values="0; 0; 0; -3; 0; 8; 0 ;-1; 0" dur="0.15s" begin="0; pause.end" />
      </feOffset>
      <feColorMatrix in="SourceGraphic" mode="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0" result="b" />
      <feOffset in="b" result="b" dx="5" dy="2">
        <animate id="myGlitch" attributeName="dx" attributeType="XML" values="0; 3; -1; 4; 0; 2; 0 ;18; 0" dur="0.35s" begin="0; pause.end" />
      </feOffset>
      <feBlend in="r" in2="g" mode="screen" result="blend" />
      <feBlend in="blend" in2="b" mode="screen" result="blend" />
    </filter>
  </defs>
</svg>

请注意，pause动画在最后一个glitch动画（begin=myGlitch.end）结束后开始，每个glitch动画都从pause动画结束开始{1}}元素（begin="0; pause.end"）。

每10秒执行一次SVG html代码

1 个答案: