Cách tốt nhất để di chuyển một nhóm các phần tử SVG

Question

Tôi đang tìm cách tốt nhất (nhanh hơn, trình dọn dẹp ...) để di chuyển một nhóm các phần tử SVG. Tôi có ba cách trong tâm trí:

• làm một vòng lặp trên tất cả các yếu tố và, đối với mỗi người chúng ta, thay đổi x và y thuộc tính
• nhóm tất cả các yếu tố trong một phần tử svg và thay đổi x và y thuộc tính
nhóm
• tất cả elemnts trong phần tử ag và áp dụng phương pháp này được mô tả ở đây: https://stackoverflow.com/a/14036803/2019761

bạn có một ý tưởng xin vui lòng?

Answer 1

Tương tác với các phương thức DOM liên quan đến JS < -> chi phí mã gốc. Những người triển khai trình duyệt đã làm việc chăm chỉ để giảm chi phí này, nhưng nó sẽ không bao giờ được miễn phí. Nếu bạn đang làm rất nhiều, chẳng hạn như thiết lập x và y trên rất nhiều yếu tố, bạn có thể bắt đầu thấy một tác động hiệu suất đáng kể. Trong trường hợp này, việc đặt thuộc tính vị trí chỉ một lần vào vùng chứa <svg> hoặc <g> có thể sẽ hữu ích.

Một nguồn chi phí quan trọng hơn có thể là công việc để sơn lại cho những thay đổi bạn thực hiện. Nếu những thay đổi này dành cho thay đổi biến đổi và nếu giá trị của biến đổi thay đổi nhiều lần trong một khoảng thời gian ngắn, thì phần lớn các triển khai sẽ vẽ nội dung của phần tử SVG đã được chuyển đổi sang bề mặt không được lưu trong bộ nhớ cache và kết hợp bề mặt đó thay vì sơn lại mỗi lần . Việc sắp xếp lại có thể nhanh hơn nhiều so với sơn lại nếu nội dung của phần tử đắt tiền để sơn (nói rằng nó chứa rất nhiều trẻ em, hoặc hiệu ứng lọc đắt tiền), vì vậy nếu bạn đang làm động tác biến đổi của <g> thì bạn có thể thấy nhiều hiệu suất tốt hơn.

Answer 2

Bạn có thể di chuyển nhóm svg hoặc các yếu tố với 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); 

} 

nhìn thấy nó trong hành động:

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

Answer 3

Tôi nghĩ rằng cách tốt hơn là để di chuyển một nhóm các yếu tố này.

Nếu bạn nhìn ví dụ bạn có thể thấy ufo được dịch và động cơ bên trong xoay vòng bên trong. (tất cả các yếu tố di chuyển các nhóm)

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