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

Question

Допустим, я хочу анимировать вектор, который выглядит следующим образом, с помощью 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-анимации, но я не об этом спрашиваю, я хочу знать, как должна выглядеть структура разметки? Так что нам будет проще манипулировать ими

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

Answer 1

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

• Если вы используете группы в родительском svg, координаты первоначально выражаются относительно области просмотра родительского 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 или свойства ширины / высоты на <svg> элемент, существует процесс согласования для определения его размера, и в соответствии с правилами HTML CSS размеры родительских элементов могут изменяться.
  • Система координат дочернего содержимого определяется соответствующими viewBox атрибутов.

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

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