Question

例如我在html中有这个

select id, in(tag,55)+in(tag,1321) AS shitfix from posts where match('') and tag in (55,1321) ORDER BY shitfix DESC;

这是我的js

<svg id="svg-img1" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="0" y2="0" style="stroke:black; stroke-width:1px;"></line>
    <line x1="0" y1="0" x2="0" y2="0" style="stroke:black; stroke-width:1px;"></line>
    <line x1="0" y1="0" x2="0" y2="0" style="stroke:black; stroke-width:1px;"></line>
    <line x1="0" y1="0" x2="0" y2="0" style="stroke:black; stroke-width:1px;">  </line>
</svg>

和＆＃34;睡眠＆＃34;功能

$('svg').find('line').each(function(){
    $(this).attr('style','stroke:red');
    sleep(10);
});

执行时，我的线条的颜色会立即改变。而且我需要依次改变线条的颜色，以便它可以看作是一种又一种颜色的颜色。与动画类似的东西

没有jquery尝试 - 结果相同

Answer 1

使用SVG animate元素：

    <animate id="a14" attributeName="stroke" from="black" to="red" 
 dur="3s" begin="9s;al4.end+3s" stroke="freeze" />

注意：不要剪切和粘贴上面的代码，它在中间被破坏，以便在不滚动的情况下看到它。

attributeName：动画
from：起始值
to：结束价值
dur：动画持续时间
begin：什么时候开始;这组特定的值表示：9秒后开始; （通过id引用此animate元素）以3秒结束
stroke：正在设置动画的属性，此属性将在动画后停止，

<强>段

＆＃13;

<svg id="svg-img1" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <line x1="0" y1="10" x2="400" y2="10" style="stroke:black; stroke-width:1px;">
    <animate id="a11" attributeName="stroke" from="black" to="red" dur="3s" begin="0s;al1.end+3s" stroke="freeze" />
    </line>
    
    <line x1="0" y1="20" x2="400" y2="20" style="stroke:black; stroke-width:1px;">
    <animate id="a12" attributeName="stroke" from="=black" to="red" dur="3s"  begin="3s;al2.end+3s" stroke="freeze" />
    </line>
    
    <line x1="0" y1="30" x2="400" y2="30" style="stroke:black; stroke-width:1px;">
    <animate id="a13" attributeName="stroke" from="black" to="red" dur="3s" begin="6s;al3.end+3s" stroke="freeze" />
    </line>
    
    <line x1="0" y1="40" x2="400" y2="40" style="stroke:black; stroke-width:1px;">
      <animate id="a14" attributeName="stroke" from="black" to="red" dur="3s" begin="9s;al4.end+3s" stroke="freeze" />
     </line>
     
</svg>

＆＃13;

Answer 2

您可以使用window.setTimeout在一定延迟后执行某项功能，而不是睡眠。所以，你可以这样做：

$('svg').find('line').each(function(index, element){
    window.setTimeout(function() {
        $(element).attr('style','stroke:red');
    }, index * 100);
});

对SVG对象的实时迭代

2 个答案: