SVG-анимация не работает, когда SVG находится в холсте?

-3

Мне нужен SVG для анимации и холста для трансформации «на лету». Почему это не работает в любом браузере?SVG-анимация не работает, когда SVG находится в холсте?

EDIT:

Так после немного больше исследования, я понял, что если что SVG был помещен внутри холст тег, анимация как this не работает, что оранжевый шар просто остается по-прежнему. Я обнаружил, что если я постоянно обновляю холст, анимация будет продолжаться.

Почему SVG и почему холст?

SVG - отличный формат, и вы можете рисовать с ним большие анимированные изображения, а размер файла очень маленький (интернет-трафик).

Холст как контейнер SVG, потому что холст предлагает очень простой способ трансформировать себя (вращать, масштабировать и т.д.). Я хочу повернуть изображение на 45 градусов и масштабировать его 3 раза. Поскольку это SVG, качество изображения по-прежнему остается большим, и поскольку это canvas, я мог бы сделать это преобразование с помощью одной строки кода, просто примените к нему матрицу преобразования.

Так выглядит, как я нашел ответ на вопрос, шахтный и это:

Если SVG содержит анимацию в себе, то он будет работать только тогда, когда я постоянно обновлять свой холст тег.

Плохая вещь (и это не связано с этим вопросом), что преобразования, которые мне нужны, не являются аффинными преобразованиями, но существуют проективные преобразования и просто не поддерживается холстом. Here - это пример проективного преобразования (и именно здесь я нашел ответ на этот вопрос), но он не совсем закончен, и если вы попробуете его и передаете в качестве входного изображения над SVG-файлом (с анимацией), это не сработает, если вы не будете постоянно переместите один из этих 4 квадратов (который в фоновом режиме освежает холст).

Я надеюсь, что это очищает вещи вниз (я вижу -3 репутации на этот вопрос, как это было неясно)

EDIT 2 OK, WTF с теми вниз голосов на самом деле? Их было 3, и я редактировал свой вопрос по другим предложениям, и теперь я вижу еще один голос. Человек, который проголосовал за этот вопрос (4-й человек), может сказать, почему он это сделал.

источник

2011-12-19 vale4674

Я не знаю, что вы пытаетесь в любом браузере? – robertc

. SVG-файл, который в нем определил анимацию (это) [http://svg-whiz.com/svg/animation/autoOrient.svg]. Затем мне нужно применить преобразование к нему, как вращение или масштабирование. Но я все еще хочу, чтобы svg был анимированным. Но проблема в том, что если я помещаю тэг src внутри тега canvas, который svg не анимирован, он просто остается неподвижным. И если я положу svg в простой div, он оживит, но я потеряю опции из canvas (transformations.) – vale4674

Я имел в виду: покажите нам свой код. Какие преобразования вы можете сделать в 'canvas', которые вы не можете сделать в SVG? – robertc

Here is an example применения SVG преобразования в файл SVG вы не имеете никакого контроля над:

<svg> 
    <g transform="scale(0.5) rotate(45) skewX(20) skewY(5)" > 
     <foreignObject width="400" height="400"> 
      <body xmlns="http://www.w3.org/1999/xhtml"> 
       <object data="http://svg-whiz.com/svg/animation/autoOrient.svg" 
         type="image/svg+xml" 
         width="400" height="400"> 
       </object> 
      </body> 
     </foreignObject> 
    </g> 
</svg>

источник

2011-12-20 08:53:29 robertc

Tnx для предложений. Используя это, нет необходимости в холсте. – vale4674

SVG-анимация не работает, когда SVG находится в холсте?

ответ

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