Задать вопрос
BlackStar1991
@BlackStar1991

SVG SMIL анимация можно ли организовать подсчет кликов?

Добрый день уважаемые. Подскажите пожалуйста есть ли возможность в SMIL анимации посчитать количество нажатий? Приведу пример.
<svg version="1.1" id="Ring" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 450 320" style="enable-background:new 0 0 450 320;" xml:space="preserve">
  
  <path id="innerRing" fill="none"; stroke="#F7DE4B"; stroke-width="10"; stroke-miterlimit="10"; d="M227.1,25.8c-43.4,0-78.6,8.6-78.6,19.4s35.2,19.4,78.6,19.4s78.6-8.6,78.6-19.4
    S270.6,25.8,227.1,25.8z"/>
 
 <animate xlink:href="#innerRing" attributeName="stroke-dasharray" from="0 168.409 0 168.409 " to="0 0 326.818 0" begin="0" dur="1"  repeatCount="1" /> 
 
    <path id="outerRingMin" fill="none"; stroke="#B2A31B"; stroke-width="0.9"; stroke-miterlimit="10";
    d="M227.1,59.8c-40.5,0-73.2-6.5-73.2-14.5s32.8-14.5,73.2-14.5c40.5,0,73.2,6.5,73.2,14.5
    S267.5,59.8,227.1,59.8"/>
 
    <animate xlink:href="#outerRingMin" attributeName="stroke-dasharray" from="0 153.693 0 153.693" to="0 0 307.386 0" begin="0" dur="1"  repeatCount="1" />
    
    <path id="outerRingMax" fill="none"; stroke="#B2A31B"; stroke-width="0.9"; stroke-miterlimit="10"; d="M227.1,69c46,0,83.4-10.7,83.4-24s-37.3-24-83.4-24c-46,0-83.4,10.7-83.4,24
    c0,13.2,36.7,23.8,82.1,24L227.1,69z"/>
 
    <animate xlink:href="#outerRingMax" attributeName="stroke-dasharray" from="0 181.92 0 181.92" to="0 0 363.84 0" begin="0" dur="1"  repeatCount="1" />
 
  </svg>

https://jsfiddle.net/BlackStar1991/ncaq5109/
Необходимо что б при НЕ парном количестве кликов кольца отрисовывались, а при парном анимация проходила в обратном направлении и они, как бы исчезали. Это реально реализовать без JS ? ПС. Ещё один маленький вопрос. Почему у меня самое большое кольцо растет в другую сторону, по сравнению с двумя другими?
  • Вопрос задан
  • 169 просмотров
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы