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

Мне нужен SVG для анимации и холст для преобразования "на лету". Почему это не работает ни в одном браузере?

EDIT:

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

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

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

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

Похоже, я нашла ответ на свой вопрос:

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

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

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

РЕДАКТИРОВАТЬ 2 Хорошо, WTF с этими голосами на самом деле? Их было 3, и я отредактировал свой вопрос по предложению других, и теперь я вижу еще один голос против. Человек, который проголосовал за этот вопрос (4-й человек), может сказать, почему он это сделал.

1 Ответ

0 голосов
/ 20 декабря 2011

Вот пример применения 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...