Định vị SVG

203

Tôi đang chơi với SVG và đang gặp một vài vấn đề với định vị. Tôi có một loạt các hình được chứa trong gthẻ nhóm. Tôi đã hy vọng sử dụng nó như một container, vì vậy tôi có thể đặt vị trí x của nó và sau đó tất cả các yếu tố trong nhóm đó cũng sẽ di chuyển. Nhưng điều đó dường như là không thể.

Làm thế nào để hầu hết mọi người đi về việc định vị một nhóm các yếu tố mà bạn muốn di chuyển song song?
Có bất kỳ khái niệm về định vị tương đối? ví dụ như liên quan đến cha mẹ của nó

svg position grouping

— ChrisInCambo
nguồn

276

Mọi thứ trong phần tử g được định vị so với ma trận biến đổi hiện tại.

Để di chuyển nội dung, chỉ cần đặt phép biến đổi trong phần tử g:

<g transform="translate(20,2.5) rotate(10)">
    <rect x="0" y="0" width="60" height="10"/>
</g>

Liên kết: Ví dụ từ thông số SVG 1.1

— Aaron Digulla
nguồn

73

Có một sự thay thế ngắn hơn cho câu trả lời trước. Các phần tử SVG cũng có thể được nhóm lại bằng cách lồng các phần tử svg:

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg x="10">
    <rect x="10" y="10" height="100" width="100" style="stroke:#ff0000;fill: #0000ff"/>
  </svg>
  <svg x="200">
    <rect x="10" y="10" height="100" width="100" style="stroke:#009900;fill: #00cc00"/>
  </svg>
</svg>

Hai hình chữ nhật giống hệt nhau (ngoài màu sắc), nhưng các phần tử svg cha có giá trị x khác nhau.

Xem http://tutorials.jenkov.com/svg/svg-element.html .

— Kağan Kayal
nguồn

33

Phải, phần tử SVG cũng có thể là một phần tử nhóm. Tôi muốn chỉ ra rằng phần tử SVG thực hiện cắt theo mặc định (ít nhất là tại thời điểm này trong Chrome). Điều này có nghĩa là bất kỳ tràn sẽ không được nhìn thấy. Không giống như phần tử "g". Chỉ cần đặt tràn = "hiển thị" và bạn sẽ quay lại công việc, nếu điều này cắn bạn.

— bladnman

1

Thật hữu ích nếu bạn muốn dịch một nhóm các yếu tố với tỷ lệ phần trăm: stackoverflow.com/a/17103928/470117

— mems

14

Có bất kỳ nhược điểm nào khi sử dụng svg thay vì g không?

— Grabantot

34

Như đã đề cập trong bình luận khác, transformthuộc tính trên gphần tử là những gì bạn muốn. Sử dụng transform="translate(x,y)"để di chuyển gxung quanh và những thứ trong ý gchí sẽ di chuyển liên quan đến g.

— mã hóa
nguồn

22

Có hai cách để nhóm nhiều hình dạng SVG và định vị nhóm:

Người đầu tiên sử dụng <g>với transformthuộc tính như Aaron đã viết. Nhưng bạn không thể chỉ sử dụng một xthuộc tính trên thành <g>phần.

Cách khác là sử dụng <svg>phần tử lồng nhau .

<svg id="parent">
   <svg id="group1" x="10">
      <!-- some shapes -->
   </svg>
</svg>

Theo cách này, svg # group1 được lồng trong #parent và x=10tương đối với svg cha. Tuy nhiên, bạn không thể sử dụng transformthuộc tính trên <svg>phần tử, điều này hoàn toàn trái ngược với <g>phần tử.

— fengbury
nguồn

13

tại sao <g> không có thuộc tính ax và y trong khi tất cả các thẻ svg khác có nó? điều đó có nghĩa là vị trí đó luôn tuyệt đối trong một <svg> ... không có vị trí tương đối,

— tái hợp

2

các ủy ban nguồn mở là như thế.

— Muhammad Umer

Tôi đồng ý ... có vẻ như là một lựa chọn thiết kế tồi. Chỉ cần tăng chuyển đổi X của một nhóm yêu cầu viết một chuỗi có khả năng phức tạp và lưu trữ tất cả các biến ở một nơi khác

— Lông mi

9

@ user1952009: có một cơ hội - chỉ là một cơ hội - rằng bạn không thực sự hiểu các lựa chọn thiết kế đã đi vào SVG.

— Paul D. Chờ

3

<g> dành cho nhóm. Nó không tự đại diện cho bất kỳ hình dạng nào vì vậy nó sẽ không có ý nghĩa đối với nó có vị trí hoặc kích thước. Thật có ý nghĩa khi có một thuộc tính biến đổi , mà bạn có thể đọc như "áp dụng biến đổi này cho cả nhóm".

— AlQafir