Лучший способ перемещения группы элементов SVG

Я ищу лучший способ (быстрее, чище...), чтобы переместить группу элементов SVG. У меня есть три способа:

выполнить цикл для всех элементов и для каждого из нас изменить атрибуты x и y
группировать все элементы в элементе svg и изменять его атрибуты x и y
группировать все элементы в элементе g и применять описанный здесь метод: qaru.site/info/487786/...

Есть ли у вас идея?

Ответ 1

Я думаю, что лучший способ - переместить группу элементов.

Если вы посмотрите на пример, вы увидите, что ufo переведены и внутренний двигатель вращается внутри него. (все перемещенные элементы являются группами)

<g xmlns="http://www.w3.org/2000/svg" transform="matrix(1 0 0 1 -12.5067 69.4101)" id="ufo">
    <g transform="matrix(1 0 0 1 0 -2.842170943040401e-14)">
        <path transform="matrix(1 0 0 1 21.6 2.8)" width="92.34371368613222" height="91.4899957511011" stroke-width="0.83" stroke-miterlimit="3" stroke="none" fill="url(#_1_)" d="M46.1,0 C71.67,0 92… "/>     
    </g>
    <g transform="matrix(0.5 0.86 -0.86 0.5 74.6 24.1)" id="motor">
        <path transform="matrix(1 0 0 1 9.7 -2.2)" width="13.11" height="13.5849" stroke-width="0.88" stroke-miterlimit="3" stroke="none" fill="url(#_4_)" d="M6.55,2.8… "/>        
    </g>
</g>

Ответ 2

Вы можете перемещать svg-группы или элементы с помощью javascript

// translate svg element
function translate( _element , _x , _y )
{
  var transform = _element.transform.baseVal.getItem(0);   
  var mat = transform.matrix;   

  mat = mat.translate( _x, _y );  
  transform.setMatrix( mat );

}

видеть в действии:

http://www.janvas.com/illustrators_designers_developers/projects/janvas2D_web/examples_EN.php?exampleName=ufo_animation_EN

Ответ 3

Взаимодействие с методами DOM включает в себя JS ↔ служебные данные на основе собственного кода. исполнители Браузер упорно работали, чтобы уменьшить эту нагрузку, но никогда не будет свободным. Если вы делаете много, например, устанавливаете x и y на множество элементов, вы можете начать ощущать значительное влияние на производительность. В этом случае установка позиционных свойств только один раз в контейнере <svg> или <g>, скорее всего, поможет.

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