использование тега <set>в SVG для изменения поворота фигуры - PullRequest
Новая
       28

использование тега <set>в SVG для изменения поворота фигуры

9 голосов
/ 25 марта 2012

Я пытаюсь установить угол поворота фигуры с помощью тега , но для жизни я не могу понять это. Какой правильный синтаксис? 

<set id="smallGearJump" 
         attributeName="transform" attributeType="XML" type="rotate" 
         to="110 100 100" begin="1s" dur="1.7s" />

Редактировать: Уточнение - я пытаюсь установить определенный угол на определенное время, а не анимировать его там. Я хочу, чтобы он перешел с 0 оборотов на 110 (в этом примере выше)

Ответы [ 4 ]

2 голосов
/ 25 марта 2012

Вам нужен элемент animateTransform, а не animate. Вы можете изменить свойства additive и fill в зависимости от ваших потребностей. 

<animateTransform id="smallGearJump"
                attributeName="transform" attributeType="XML"
                type="rotate" to="110 100 100" dur="1.7s" begin="1s"
                additive="replace" fill="freeze" />

См. Документ W3C или MDN .

1 голос
/ 16 марта 2013

Если вы хотите, чтобы анимация переходила из одного состояния в другое, укажите calcMode = "discrete".Вот так например: 

<animateTransform attributeName="transform" type="rotate" to="110 100 100" dur="1.7s" begin="1s"
            calcMode="discrete" />
1 голос
/ 30 марта 2012

Это всего лишь обходной путь для вашего вопроса. Обнаружено, что поведение set, когда вы задаете неверные значения атрибута, вызывает событие onbegin и ничего не делает с элементом. Таким образом, используя это, я дал неправильные значения атрибута для атрибута «to». Таким образом, команда set вызывает событие begin после 2s, но преобразование элемента не применяется. Затем внутри обработчика события onbegin я получаю целевой элемент, который в данном случае является прямоугольным с идентификатором c1. Затем я применяю требуемое преобразование к нему. (Поверните 110 вокруг центра.)

Также onend запускается после 5s. Внутри этого я проверяю значение атрибута fill и решаю, следует ли отменить примененное преобразование.

Это может быть обходной путь, но нет компромисса в начальном значении, значении продолжительности.

Также

<set attributeName="transform" to="200" ... /> переводит в x dir с заданным поведением

<set attributeName="transform" to="200 100" ... /> переводит 200 в x dir и 100 в y dir с заданным поведением

Но не могу найти синтаксис для поворота.

Разместил здесь скрипку http://jsfiddle.net/AA2tT/

0 голосов
/ 16 марта 2013

Я не смог найти удовлетворительный ответ.

Я, наконец, закодировал его так:

  • убрал оригинальный элемент в <defs>
  • сделать два <use> элемента, один с дополнительным вращением, другой без
  • , установить два <use>, чтобы они были видимыми или скрытыми во время анимации, в соответствии с требованиями

Пример: 

<defs>
  <path id="example" d="..."/>
</defs>
<use xlink:href="#example" visibility="hidden">
  <set begin="0s" end="1s" attributeName="visibility" to="visible"/>
</use>
<use xlink:href="#example" visibility="hidden" transform="rotate(110 100 100)">
  <set begin="1s" end="3s" attributeName="visibility" to="visible"/>
</use>
...