#svg #smil
Вопрос:
У меня есть довольно простая анимация морфинга svg с использованием SMIL, где путь изменяется при нажатии на элементы в svg.
Я бы хотел, чтобы путь менялся с самой последней его версии, но вместо этого он каждый раз возвращается к исходному пути. В идеале формы больших двоичных объектов должны подниматься и опускаться (колебаться) при нажатии на каждую ссылку.
Я пробовал additive=»заменить», что звучит так, как будто это правильный атрибут для использования, но он не работает.
Кто-нибудь знает правильную комбинацию, чтобы начать анимацию с последней точки?
<svg viewBox="0 0 1196.87 254" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g fill="#64bab7" font-family="Helvetica" font-size="25">
<a xlink:href="#link1" class="loop-tab"><text id="link1" transform="translate(62.5 111.96)"><tspan letter-spacing="-.07em">1</tspan><tspan letter-spacing="-.05em" x="12.37" y="0">.</tspan><tspan x="18.47" y="0"/><tspan letter-spacing="-.01em" x="24.22" y="0">Link</tspan></text></a>
<a xlink:href="#link2" class="loop-tab"><text id="link2" transform="translate(305.35 111.96)">2. Link</text></a>
<a xlink:href="#link3" class="loop-tab"><text id="link3" transform="translate(548.57 111.96)">3. Link</text></a>
<a xlink:href="#link4" class="loop-tab"><text id="link4" transform="translate(792.92 111.96)">4. Link</text></a>
<a xlink:href="#link5" class="loop-tab"><text id="link5" transform="translate(1047.39 111.96)">5. Link</text></a>
</g>
<path fill="none" stroke="#6dc4c2" stroke-miterlimit="10" stroke-width="2.04" d="m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z">
<animate begin="link1.click" repeatCount="1" fill="freeze" accumulate="sum" additive="replace" attributeName="d" dur="0.5s"
values="m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z;
m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-55.66 148.77-127 148.77c-63.68 0-101.91-94.2-101.91-148.8 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z"/>
<animate begin="link2.click" repeatCount="1" fill="freeze" accumulate="sum" additive="replace" attributeName="d" dur="0.5s"
values="m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z;
m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 148.59 122.81 148.59 92.13-97.46 122.84-148.68 61.45-102.32 122.84-102.32h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z"/>
<animate begin="link3.click" repeatCount="1" fill="freeze" accumulate="sum" additive="replace" attributeName="d" dur="0.5s"
values="m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z;
m598.43 252c-61.43 0-92.13-97.43-122.88-148.65s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 148.65-122.89 148.65z"/>
<animate begin="link4.click" repeatCount="1" fill="freeze" accumulate="sum" additive="replace" attributeName="d" dur="0.5s"
values="m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z;
m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 148.67 122.84 148.67 92.09-97.38 122.8-148.6 65.59-102.4 127.04-102.4c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z"/>
<animate begin="link5.click" repeatCount="1" fill="freeze" accumulate="sum" additive="replace" attributeName="d" dur="0.5s"
values="m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z;
m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.69 148.63-101.94 148.63-61.42 0-96.28-97.38-127-148.6s-61.44-102.41-122.86-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z"/>
</path>
</svg> Ответ №1:
Я уже разобрался с этим.
<svg viewBox="0 0 1196.87 254" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g fill="#64bab7" font-family="Helvetica" font-size="25">
<a xlink:href="#link1" class="loop-tab"><text id="link1" transform="translate(62.5 111.96)"><tspan letter-spacing="-.07em">1</tspan><tspan letter-spacing="-.05em" x="12.37" y="0">.</tspan><tspan x="18.47" y="0"/><tspan letter-spacing="-.01em" x="24.22" y="0">Link</tspan></text></a>
<a xlink:href="#link2" class="loop-tab"><text id="link2" transform="translate(305.35 111.96)">2. Link</text></a>
<a xlink:href="#link3" class="loop-tab"><text id="link3" transform="translate(548.57 111.96)">3. Link</text></a>
<a xlink:href="#link4" class="loop-tab"><text id="link4" transform="translate(792.92 111.96)">4. Link</text></a>
<a xlink:href="#link5" class="loop-tab"><text id="link5" transform="translate(1047.39 111.96)">5. Link</text></a>
</g>
<path fill="none" stroke="#6dc4c2" stroke-miterlimit="10" stroke-width="2.04" d="m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z">
<animate begin="link1.click" attributeName="d" repeatCount="1" fill="freeze" accumulate="sum" additive="replace" dur="0.5s"
to="m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-55.66 148.77-127 148.77c-63.68 0-101.91-94.2-101.91-148.8 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z"/>
<animate begin="link2.click" attributeName="d" repeatCount="1" fill="freeze" accumulate="sum" additive="replace" dur="0.5s"
to="m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 148.59 122.81 148.59 92.13-97.46 122.84-148.68 61.45-102.32 122.84-102.32h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z"/>
<animate begin="link3.click" attributeName="d" repeatCount="1" fill="freeze" accumulate="sum" additive="replace" dur="0.5s"
to="m598.43 252c-61.43 0-92.13-97.43-122.88-148.65s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 148.65-122.89 148.65z"/>
<animate begin="link4.click" attributeName="d" repeatCount="1" fill="freeze" accumulate="sum" additive="replace" dur="0.5s"
to="m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 148.67 122.84 148.67 92.09-97.38 122.8-148.6 65.59-102.4 127.04-102.4c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z"/>
<animate begin="link5.click" attributeName="d" repeatCount="1" fill="freeze" accumulate="sum" additive="replace" dur="0.5s"
to="m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.69 148.63-101.94 148.63-61.42 0-96.28-97.38-127-148.6s-61.44-102.41-122.86-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z"/>
</path>
</svg>