Выполнение SVG html-кода каждые 10 секунд

Question

Я использовал код html, чтобы сделать текст сбоя на веб-сайте, однако мне нужно сделать только глюк анимации каждые 10 секунд, поскольку он немного сумасшедший на данный момент.

Где я застрял - как повторно выполнить html-код, используя JS setInterval(html, 10000). Возможно ли это? Благодаря!

<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, сделать «фиктивную» анимацию элемент, который ничего не делает, и связать начало/конец другой анимации к нему:

<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 (begin="0; pause.end").