SVG 'set' 动画没有按预期循环

Question

我有一个相当简单的 SVG，其中包含 2 个文本元素。我希望它们每 2 秒切换一次（例如“2019”，等待 2 秒，“2020”，等待 2 秒，永远重复）。

在我的一生中，第一个“2019”放映后什么也没有发生（例如 2019 年放映，然后永远不会消失，2020 年也不会出现）。如果我将 show2019 begin 更改为“3s;hide2020.end”，它不会像预期的那样显示 3 秒，但仍然不会继续。

<?xml version="1.0" encoding="utf-8"?>
    <svg xmlns="http://www.w3.org/2000/svg" width="49" height="64">
        <rect x="0" y="0" width="49" height="64" rx="5" ry="5" stroke="#F00" fill="#FFF" stroke-width="1" />
            <text x="50%" text-anchor="middle" font-family="sans-serif" font-size="9pt" fill="#F00">
              <tspan x="50%" y="1em">Check</tspan>
              <tspan x="50%" y="2em">Terms</tspan>
              <tspan x="50%" y="3em">for</tspan>
            </text>
            <text x="50%" text-anchor="middle" font-family="sans-serif" font-size="9pt" font-weight="bold" fill="#F00" visibility="hidden">
              <tspan x="50%" y="4.5em">2019</tspan>
              <set id="show2019" attributeName="visibility" to="visible" dur="2s" repeatCount="123456" begin="0s;hide2020.end" />
              <set id="hide2019" attributeName="visibility" to="hidden" dur="2s" repeatCount="123456" begin="show2019.end + 2s" />
            </text>
            <text x="50%" text-anchor="middle" font-family="sans-serif" font-size="9pt" font-weight="bold" fill="#F00" visibility="hidden">
              <tspan x="50%" y="4.5em">2020</tspan>
              <set id="show2020" attributeName="visibility" to="visible"dur="2s" repeatCount="123456" begin="hide2019.end" />
              <set id="hide2020" attributeName="visibility" to="hidden" dur="2s" repeatCount="123456" begin="show2020.end + 2s" />
            </text>
    </svg>

CodePen

Answer 1

好吧，我给你带来一个更好的解决方案，类似于路径转换。我没有使用 set...attributeName，而是使用了 animate...attributeName，它允许您以更好的外观和更少的代码来做同样的事情。请参阅此处的代码：

    <svg xmlns="http://www.w3.org/2000/svg" width="49" height="64">
        <rect x="0" y="0" width="49" height="64" rx="5" ry="5" stroke="#F00" fill="#FFF" stroke-width="1" />
            <text x="50%" text-anchor="middle" font-family="sans-serif" font-size="9pt" fill="#F00">
            <tspan x="50%" y="1em">Check</tspan>
            <tspan x="50%" y="2em">Terms</tspan>
            <tspan x="50%" y="3em">for</tspan>
            </text>
            <text x="50%" text-anchor="middle" font-family="sans-serif" font-size="9pt" font-weight="bold" fill="#F00" opacity="1">
                <tspan x="50%" y="4.5em">2019</tspan>
                    <animate attributeName="opacity" from="1" to="0" begin="0s" dur="3s" values="0;1;0" calcMode="linear" repeatCount="indefinite"/>
            </text>
            <text x="50%" text-anchor="middle" font-family="sans-serif" font-size="9pt" font-weight="bold" fill="#F00" opacity="1">
                <tspan x="50%" y="4.5em">2020</tspan>
                    <animate attributeName="opacity" from="0" to="1" begin="0s" dur="3s" values="1;0;1" calcMode="linear" repeatCount="indefinite"/>
            </text>
    </svg>

如果您调整开始持续时间和值，可以调整它以满足您的需要。

SVG 'set' 动画没有按预期循环

SVG 'set' animation not looping as expected

svg

smil

svg-animate