SVG 不透明度图像在淡入淡出后不断弹出答案

【问题标题】：SVG Opacity Image keeps popping up after fadeSVG 不透明度图像在淡入淡出后不断弹出
【发布时间】：2021-01-21 18:27:42
【问题描述】：

                <animate id="op"
                attributeName="opacity"
                values="0;1;0" 
                dur="1s"
                begin="1s;op.end+3s"
                />

我有这段代码用于淡出图像，然后延迟 3 秒重新打开，但是当它在 3 秒延迟期间淡出时，图像会重新弹出并可见。如何在延迟期间使其不可见？

【问题讨论】：

标签： svg opacity

【解决方案1】：

如果您希望动画状态在动画结束后保持不变，请添加 fill="freeze"。

【讨论】：

【解决方案2】：

<animate id="op"
                attributeName="opacity"
                values="1;0;0;1" 
                keyTimes="0;0.2;0.8;1"
                dur="5s"
                begin="1s"
                />

您可以使用keyTimes。一个keyTime 对应于一个value，并表示应达到该给定值的持续时间比例。所以这里它在时间 0*5s = 0s 时从不透明度 1 开始，然后在时间 0.2*5s = 1s 时它达到不透明度 0（淡出），它将不透明度 0 保持到时间 0.8*5s = 4s 并在时间返回不透明度 1时间 1*5s = 5s（淡入淡出）。

工作示例：

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-50 -50 100 100">
<circle r="50">
        <animate id="op"
                attributeName="opacity"
                values="1;0;0;1" 
                keyTimes="0;0.2;0.8;1"
                dur="5s"
                begin="1s"
                />
</circle>
</svg>

【讨论】：