Najlepszy sposób na przeniesienie grupy elementów SVG

Szukam najlepszego sposobu (im szybciej, czyściej ...), aby przenieść grupę elementów SVG. Mam trzy sposoby na uwadze:Najlepszy sposób na przeniesienie grupy elementów SVG

zrobić pętlę na wszystkich elementach, a dla każdego z nas, zmieniają X i Y atrybuty
grupę wszystkie elementy w elemencie svg i zmienić jego xi y atrybuty
wszystkie grupy zbudowanego z grzyba w elemencie ag i zastosować metodę opisaną tutaj: https://stackoverflow.com/a/14036803/2019761

Czy masz pomysł, proszę?

Źródło

2013-05-05 Arnaud

bym wybrała ostatnią opcję, owinąć go wokół element i przenieść całość z 'transform', unikać zbyt wielu

Niedawno miałem do czynienia z d3.js i ja również wcześniej, że dodanie elementów do grupy i transformacja grupy jest najlepszym rozwiązaniem. – wootscootinboogie

Interakcja z metodami DOM obejmuje JS < -> natywny nadmiar kodu. Twórcy przeglądarki ciężko pracowali, aby zmniejszyć to obciążenie, ale nigdy nie będzie to bezpłatne. Jeśli robisz dużo, na przykład ustawiając xiy na wielu elementach, możesz zacząć odczuwać znaczny wpływ na wydajność. W takim przypadku ustawienie pozycji pozycyjnych tylko jeden raz na pojemniku <svg> lub <g> prawdopodobnie pomoże.

Bardziej znaczącym źródłem kosztów ogólnych może być praca polegająca na odświeżeniu wprowadzanych zmian. Jeśli te zmiany dotyczą zmiany transformacji i jeśli wartość transformacji zmienia się wiele razy w krótkim przedziale czasowym, większość implementacji maluje zawartość przekształconego elementu SVG na buforowaną powierzchnię poza ekranem i komplikuje tę powierzchnię zamiast malowania za każdym razem . Komponowanie może być dużo szybsze niż ponowne malowanie, jeśli zawartość elementu jest kosztowna do malowania (powiedzmy, że zawiera dużo dzieci lub drogich efektów filtrowania), więc jeśli animujesz przekształcenie <g>, możesz zobaczyć wiele lepsza wydajność.

Źródło

2013-05-05 16:21:44 jwatt

Dziękuję. Niestety, nie rozumiem angielskiego bardzo dobrze, ale wniosek jest taki, że '' jest lepszy niż ' Arnaud

można przenieść grup SVG lub elementy z 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); 

}

zobaczyć go w akcji:

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

Źródło

2013-05-08 11:04:48

Tak, ale pytam, jaka jest najlepsza metoda między tymi trzema, które wymieniłem. – Arnaud

myślę, że lepiej jest, aby przenieść grupę elementów.

Jeśli spojrzysz na przykład, zobaczysz, że ufo jest przetłumaczone , a wewnętrzny silnik obraca się wewnątrz niego. (wszystkie elementy są przemieszczane grupy)

<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>

Źródło

2013-05-08 12:43:55

Najlepszy sposób na przeniesienie grupy elementów SVG

Odpowiedz

Powiązane problemy