Cách dịch nhóm SVG theo tỷ lệ phần trăm của chế độ xem

Question

Tôi có một svg <rect> nằm trong một nhóm <g> (nhóm) và tôi muốn chia tỷ lệ phần trăm và sau đó dịch theo tỷ lệ phần trăm của chế độ xem. Hầu hết mọi thứ trong svg đều cho phép đặc điểm kỹ thuật của các đơn vị thông qua một số tùy chọn vô lý; ví dụ. px, em,%, ex, pt, pc, ... Tuy nhiên có vẻ như số được chỉ định trong bản dịch chỉ là pixel.

Thing là nếu tôi phải quay lại và tính toán lại giá trị pixel cho bản dịch, thì svg của tôi sẽ trở nên phụ thuộc vào độ phân giải. Sau đó, tôi, bạn và mọi người sẽ bị hút vào một nghịch lý. Bạn có thể thấy tại sao tôi hơi lo lắng.

<svg> 
    <g transform="scale(1, 1) translate(0, 0)"> 
    <rect x="45%" y="25%" height="50%" width="10%"/> 
    </g> 
</svg> 

http://jsbin.com/ubeqot/1/edit

Answer 1

Stick yếu tố <g> trong một yếu tố nội tại <svg> và thêm x và y thuộc tính với giá trị phần trăm đến các yếu tố bên trong <svg> để dịch nó.

<svg> 
    <svg x="10%" y="20%"> 
    <g transform="scale(1, 1)"> 
     <rect x="45%" y="25%" height="50%" width="10%"/> 
    </g> 
    </svg> 
</svg> 

Nếu bạn muốn quy mô áp dụng đầu tiên bạn sẽ đặt các yếu tố bên trong <svg><g> để thay thế.