Блог

У меня есть довольно простой SVG с 2 текстовыми элементами. Я хочу, чтобы они переключались каждые 2 секунды (например, «2019», подождите 2 секунды, «2020», подождите 2 секунды, повторяйте вечно).

За всю мою жизнь ничего не происходит после того, как показан первый «2019» (например, 2019 показывает, а затем никогда не исчезает, и 2020 никогда не появляется). Если я изменю начало show2019 на «3s;скрыть 202020.конец», оно не появится в течение 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>
 

Кодовый набор

Что ж, я предлагаю вам еще более приятное решение, которое напоминает трансформацию пути. Вместо использования 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> 

Если вы поиграете с продолжительностью и значениями начала, вы можете просто настроить их в соответствии с вашими потребностями.