правильная структура разметки inline-SVG для анимации? - PullRequest
Новая
       42

правильная структура разметки inline-SVG для анимации?

0 голосов
/ 10 мая 2018

Допустим, я хочу анимировать вектор, который выглядит следующим образом, с помощью Javascript.

Нажмите здесь .. (Извините, моя репутация Точка ниже требования к публикации изображения)

затем я делю его на 4 части (голова, тело, 2 ноги) и делаю анимацию для каждой из них ..

В чем мой вопрос, какова правильная структура разметки для вектора выше??

из того, что я знаю .. есть 3 возможности:

  1. Группа

    <svg> <g id='head'>...</g> <g id='body'>...</g> <g id='leg_1'>...</g> <g id='leg_2'>...</g> </svg>

  2. Вложенный SVG

    <svg> <svg id='head'>...</svg> <svg id='body'>...</svg> <svg id='leg_1'>...</svg> <svg id='leg_2'>...</svg> </svg>

  3. SVG для каждой части

    <svg id='head'></svg> <svg id='body'></svg> <svg id='leg_1'></svg> <svg id='leg_2'></svg>

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

есть ли кто-нибудь, кто может дать мне небольшое просветление по этому поводу?

1 Ответ

0 голосов
/ 10 мая 2018

Какая из этих структур вы бы использовали, на самом деле не определяется тем, что вы хотите их оживить. Вопрос, который вам нужно задать, заключается в том, как наиболее выразительно сформулировать свойства позиционирования, размеров и преобразования для каждой из частей и для связи друг с другом?

  • Если вы используете группы в родительском svg , координаты первоначально выражаются относительно области просмотра родительского элемента <svg>.

    • с атрибутом SVG transform или свойством CSS transform элемента <g>, вы можете перемещать детали внутри родительского элемента. (Под «перемещением» я подразумеваю любое афинное преобразование, включая вращение, масштабирование, переворачивание и наклон)
    • Координаты, в которых выражены части, будут интерпретироваться как «нейтральная» позиция в родительском элементе.

  • Если вы вкладываете svgs , вы создаете новые видовые окна для каждой части.

    • Для каждой части вы определяете прямоугольник, внутри которого он должен отображаться с атрибутами x, y, width и height. preserveAspectRatio разрешает позиционирование viewBox внутри. SVG или CSS transform можно использовать для перемещения этих прямоугольников.
    • Систему координат для выражения дочернего содержимого можно выбрать с помощью атрибута viewBox. Координаты не зависят от родителей. Если оставить viewBox вне, результат будет эквивалентен установке преобразования translate для элемента <g> с использованием соответствующих значений атрибутов x и y.

  • Если вы используете отдельные svgs , каждый из них размещается в родительском HTML в соответствии с правилами CSS.

    • Помните, свойства позиционирования, выраженные в процентах , имеют разное значение в HTML и SVG . Если вы не укажете свойства viewBox или width / height для элемента <svg>, существует процесс согласования для определения его размера, и в соответствии с правилами HTML CSS размеры родительских элементов могут измениться.
    • Система координат дочернего содержимого определяется соответствующими атрибутами viewBox.

Вопрос, более конкретный в вашем случае, заключается в том, хотите ли вы использовать CSS или SMIL анимации. Хотя SMIL не реализован в браузерах Microsoft, он имеет более богатый синтаксис для синхронизации и размещения нескольких анимаций в одном свойстве / атрибуте. Он также имеет возможность реагировать на события, и вы можете анимировать атрибуты XML. (Не все из них, но все атрибуты положения, упомянутые здесь.) CSS имеет возможность определять transform-origin для каждого преобразования, что в SVG реализовано только для преобразований rotate.

Итак, если вы хотите анимировать расположение частей в родительском элементе, выбор CSS-анимации может определить структуру, чтобы избежать использования атрибутов XML для этого позиционирования.

...