SVG-анимация не работает в chrome

Эта анимация прекрасно работает в Firefox ... Но не в Chrome. Полигоны не оживляют? JSFiddle SVG-анимация не работает в chrome

<polygon fill="url(#grad1)" points="503,275 529,275 529,275 503,275"> 
    <animate attributeName="points" 
     calcMode="linear" 
     begin="1s" dur="0.4s" 
     from="503,275 529,275 529,275 503,275" 
     to="503,275 529,275 843,335 789,335" 
     fill="freeze"/>

Любые идеи?

источник

2013-03-08 morphsd

Похожие вопросы: http://stackoverflow.com/questions/11916796/chrome-bug-with-svg-polygon-animation и http://stackoverflow.com/questions/13530894/chrome-svg-animate-tag. –

Хром (до версии 25.0.1364.152) не поддерживает svg полностью.

Некоторые функции svg также не поддерживаются в Firefox. Например animateTransform тега, который является прямым потомком в SVG тега не анимировать Г в Firefox и chrome, Хотя W3 документе говорит, что он должен оживить SVG,

Так будет лучше протестировать Г в opera,

источник

2013-03-09 19:42:24

тег animateTransform, который является прямым дочерним элементом svg-тега, должен анимироваться в Firefox. Если у вас есть неработающий тестовый файл, поднимите ошибку в https://bugzilla.mozilla.org/ –

ОК, поэтому animateTransform, анимация элемента svg, не является частью SVG 1.1 (текущий стандарт). Предлагается добавить его в SVG 2, но в настоящее время это продолжается. –

@RobertLongson, извините! но я не нашел ни одного письменного документа, что animateTransform, анимация элемента svg, не является частью SVG 1.1 в http://www.w3.org/TR/SVG/struct.html#SVGElement. Любое количество следующих элементов в любом порядке: и animateTransform есть в списке элементов, я тестировал в Opera, там поддерживается эта анимация. Что это значит? Opera реализовала svg неправильно? Plz reply ... –

Хорошо, позвольте мне попробовать еще раз - не поймал, что вы только смотрели на Polygon. Похоже, что анимация не работает непосредственно на полигоне в Chrome, но вы можете получить тот же эффект, поместив фильтр в форму и анимируя область фильтра. Это своего рода Hacky, но он получает вас, где вы хотите:

<filter id="animateClip" x="0%" y="0%" width="100%" height="0%"> 
     <animate attributeName="height" 
     attributeType="XML" 
     calcMode="linear" 
     dur="1s" 
     from="0%" 
     to="100%" 
     fill="freeze"/> 
     <feColorMatrix type="identity"/> 
    </filter>

ColorMatrix есть только дать результат фильтрации. Chrome не любит пустые фильтры.

источник

2013-03-09 20:25:46

Нет, это не работает ... – morphsd

SVG-анимация не работает в chrome

ответ

Смежные вопросы