Кроссплатформенная анимация вращения SVG:

0

Привет, Я сейчас работаю с некоторыми анимациями SVG, которые должны работать на нескольких платформах.

Однако у меня проблема с Internet Explorer (конечно).

Я использую Кит Вудс, расширение JQuery SVG.

Я в основном использовал слои и показывал, скрывал, чтобы анимировать мои страницы, но теперь мне нужно сделать поворот строки:

        $('#topBar').stop().animate({
            svgTransform: 'rotate('+angle+','+(545+amplification)+',-260)'}, time);

Объект SVG:

<g
   id="g3953">
  <path
     sodipodi:nodetypes="cc"
     inkscape:connector-curvature="0"
     id="topBar"
     d="m 545,-260 322,0"
     style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
  <rect
     y="-260"
     x="545"
     height="5"
     width="5"
     id="centerPoint"
     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
</g>

Это частично работает, но строка, называемая верхним баром, вращается и переводится в другую усадьбу, чем в Chrome и Firefox. Т.е. он прыгает вокруг немного.

У кого-нибудь есть решение? я могу сделать перевод по-другому или просто использовать CSS- или другой метод поворота JQuery, чтобы получить лучшую поддержку?

Я видел, как JQuery вращается, но поддерживает ли он перевод?

Посмотрите, как изображение скачет ниже, это происходит, когда я просто переместил точку поворота...

Изображение 174551

Вы можете играть с кодом...

Теги:
svg
internet-explorer

1 ответ

1

IE не поддерживает анимацию в SVG. Основным способом поворота во всех браузерах является использование getBBox() для контейнера и поворот из центра ограничивающей рамки. Следующим образом:

<svg id="mySVG" width=400" height="400">
<g id="containerG">
<polygon id="myPolygon" fill="yellow" stroke="blue" stroke-width="1" points="380,80 200,10 40,80 100,320 300,350" />
<circle id="myCircle" cx="170" cy="200" r="40" fill="lime" />
</g>


var deg=30
var bb=containerG.getBBox()
var bbx=bb.x
var bby=bb.y
var bbw=bb.width
var bbh=bb.height
var cx=bbx+.5*bbw
var cy=bby+.5*bbh
containerG.setAttribute("transform","rotate("+deg+" "+cx+" "+cy+")")

Из личного опыта анимация не имеет смысла для меня в большинстве svg-приложений. Однако, что важно, это переходы. Под переходами я подразумеваю плавное перемещение атрибутов графического элемента, поскольку они визуально изменяются. Я думаю, что в настоящее время лучшая кросс-браузерная обработка переходов svg - на D3. D3 api может быть больше, чем вы хотите получить в это время... Но если вы планируете серьезно работать с svg, вы должны попробовать.

Поделиться
  • 0
    IE не поддерживает SMIL-анимацию, но этот пост не имеет к этому никакого отношения. Кроме того, приветствуем ответ и добро пожаловать в SO :)
  • 0
    Так он вращается, но вращения не поддерживаются? @ bfred Я не понимаю твой комментарий, я или Фрэнсис используете SMIL?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню