Svg animate: начало и конец

Я изучаю о svg animatepoint. Я хочу, чтобы круг приближался к радиусу = 80, а после этого возвращался к 60. Я видел msdn и использовал метод begin и .end.Svg animate: начало и конец

Он работает для Firefox, но не работает в Google Chrome. В google chrome он изменит радиус до 80 (ZoomAct) и остановится. Он не запускает анимацию (NarrowAct).

Как это решить?

<circle r="60" cx="200" cy="200" id = "AnimatePoint" 
      style="fill:rgba(18, 66, 243 , 0.3);stroke:blue;stroke-width:4;display:block"> 

     <animate id = ZoomAct 
        attributeName="r" 
        from="60" to="80" 
        dur="1s" 
        begin ="0s;NarrowAct.end" 
     /> 
     <animate id = NarrowAct 
        attributeName="r" 
        from="80" to="60" 
        dur="1s" 
        begin="ZoomAct.end" 
     /> 
    </circle>

JSFIDDLE LINK: http://jsfiddle.net/kimwong/mwxj220f/

Обновление от 2015/1/15

Наконец я узнал эту проблему, она не относится к двойные кавычки. Я добавил двойные кавычки в свой локальный файл, и он снова не работает. Проблема состоит в том, что я включал два библиотеку JS:

<script type="text/javascript" src="jquery-2.1.3.js"></script> 
<script type="text/javascript" src="jquery.mobile-1.4.5.js"></script>

Когда я удалить один из .js файла. Оно работает.

После этого я могу добавить эти две библиотеки в fiddle.net: Он будет увеличиваться один раз и останавливаться. http://jsfiddle.net/kimwong/mwxj220f/2/

Любой может иметь другие способы, чтобы закончить эту анимацию?

источник

2015-01-14 Kim Wong

Работает отлично для меня в Chrome и Firefox. Ваши 'id' должны иметь двойные кавычки '' 'вокруг него. ---> [Fiddle] (http://jsfiddle.net/mwxj220f/1/). –

Спасибо. Извините за то, что я забыл ввести двойные кавычки. но я думаю, что проблема здесь нет. Анимация все еще не работает в Google Chrome, когда я открываю ее в локальном файле. он работает в скрипке. –

Если вы не можете предоставить тестовый документ, который демонстрирует проблему, мы, вероятно, вам не поможем. –

Вам нужны цитаты вокруг ваших идентификаторов («ZoomAct» и «NarrowAct»).

Когда вы вставляете его в HTML-страницу (как и в jsfiddle), браузер использует более мягкие правила синтаксического разбора HTML. Но в отдельном случае он использует правила XML-анализа, которые требуют, чтобы ваши атрибуты имели кавычки.

Фактически, Chrome сообщает вам, что именно при его загрузке.

Эта страница содержит следующие ошибки:

ошибку на линии 9 в колонке 15: AttValue:. "Или" ожидаемый Ниже рендеринг страницы до первой ошибки

источник

2015-01-14 16:01:32

Спасибо за ваш ответ. Но проблема заключается не в двойных кавычек в этой проблеме. У меня есть вопрос. Пожалуйста, проверь это. :) –

Svg animate: начало и конец

ответ

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