Анимация SVG скрыта до ее начала

http://codepen.io/Asider/pen/mVBONd

Привет, мир,

Я изучаю, как анимировать SVG, и столкнулся с проблемой с begin="click" : элемент невидим и, следовательно, неактивен.

Нормально ли, что элементы svg скрыты до начала их анимации? Как я могу убедиться, что он виден (и, следовательно, доступен для кликов)?

Большое спасибо !


svg animation svg-animate
person Arnaud Sider    schedule 18.01.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы должны установить для атрибута d элемента значение по умолчанию, иначе он ничего не отобразит:

.test {
  display: block;
  transform: scale(3);
  margin: 0 auto 50px;
  width: 50px;
  height: 50px;
}
<svg class="test" viewBox="0 0 50 50">
  <path fill="#00ff00" d="M30.1,29.6V21l-5.3-5.4L19.9,21v3.3h-8.6v15.3h27.3V29.6H30.1z">
    <animate attributeName="d" values="M30.1,29.6V21l-5.3-5.4L19.9,21v3.3h-8.6v15.3h27.3V29.6H30.1z;
                    M30.1,23.6V16l-5.3-5.4L19.9,14v3.3h-8.6v22.3h27.3V23.6H30.1z;
                    M30.1,24.6V16l-5.3-5.4L19.9,16v3.3h-8.6v20.3h27.3V24.6H30.1z;" from="0" to="1" dur="1200ms" fill="freeze" begin="click" keyTimes="0; .8; 1" calcMode="linear" repeatcount="indefinite" />
  </path>
</svg>

person Kaiido    schedule 18.01.2016
comment
Это было просто... Спасибо, Кайидо! - person Arnaud Sider; 18.01.2016