Question

我有这段代码据我所知它应该绘制第一个矩形纠缠然后第二个。第二个是动画，它只是扩展了宽度。因此，使用此代码，我看到蓝色条出现然后我看到黄色条出现并且它按预期增长但是当它完成时它消失。两者具有相同的起点和宽度，因此它创建了一个进度条。蓝色条的长度是400像素，黄色只有250个所以我应该看到至少150像素的蓝色，这是我认为应该发生的事情

null

我还是SVG的新手，但这应该是我读过的黄色条最后完成的，所以它应该是最重要的。

Answer 1

您的animate代码必须包含值为fill的显式'freeze'参数。否则，使用默认的fill='remove'，这意味着动画参数将恢复为动画之前的值（在这种情况下，＆＃34; 0＆＃34;）。

<svg xmlns='http://www.w3.org/2000/svg'>
    <rect x='10' y='10' height='20' width='400' style='stroke:#ff0000; fill: #0000ff'>
    </rect>
    <rect id="r1" x='10' y='10' height='20' width='0'  style='stroke:#ff0000; fill: #ffff00'>
<animate attributeName='width' attributeType='XML'
    from='0'
    to='250'
    begin='0s'
    dur='2s'
    fill='freeze'
         />
    </rect>
</svg>

（完整参考：https://www.w3.org/TR/SVG/animate.html#ValueAttributes）

为什么第二个矩形在我的SVG代码中不可见

1 个答案: