SVG“设置”动画未按预期循环答案

【问题标题】：SVG 'set' animation not looping as expectedSVG“设置”动画未按预期循环
【发布时间】：2021-10-16 05:01:11
【问题描述】：

我有一个包含 2 个文本元素的相当简单的 SVG。我希望它们每 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

【问题讨论】：

标签： svg svg-animate smil

【解决方案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>

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

【讨论】：