Posisi SVG

203

Saya bermain-main dengan SVG dan saya mengalami beberapa masalah dengan penentuan posisi. Saya memiliki serangkaian bentuk yang terdapat dalam gtag grup. Saya berharap untuk menggunakannya seperti wadah, sehingga saya bisa mengatur posisi x-nya dan semua elemen dalam grup itu juga akan bergerak. Tapi itu sepertinya tidak mungkin.

Bagaimana sebagian besar orang memposisikan sekelompok elemen yang ingin Anda pindahkan bersama?
Apakah ada konsep positioning relatif? misalnya relatif terhadap induknya

svg position grouping

— ChrisInCambo
sumber

276

Segala sesuatu dalam elemen g diposisikan relatif terhadap matriks transformasi saat ini.

Untuk memindahkan konten, cukup letakkan transformasi di elemen g:

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

Tautan: Contoh dari spec SVG 1.1

— Aaron Digulla
sumber

73

Ada alternatif yang lebih pendek dari jawaban sebelumnya. Elemen SVG juga dapat dikelompokkan berdasarkan elemen bersarang 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>

Dua persegi panjang identik (terlepas dari warna), tetapi elemen svg induk memiliki nilai x yang berbeda.

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

— Kağan Kayal
sumber

33

Benar, elemen SVG juga bisa menjadi elemen pengelompokan. Saya ingin menunjukkan bahwa elemen SVG mengimplementasikan kliping secara default (setidaknya saat ini di Chrome). Ini berarti setiap luapan tidak akan terlihat. Berbeda dengan elemen "g". Cukup setel overflow = "terlihat" dan Anda kembali dalam bisnis, jika ini menggigit Anda.

— bladnman

1

Ini berguna jika Anda ingin menerjemahkan sekelompok elemen dengan persentase: stackoverflow.com/a/17103928/470117

— mems

14

Apakah ada kekurangan untuk menggunakan svg alih-alih g?

— grabantot

34

Seperti yang disebutkan dalam komentar lain, transformatribut pada gelemen adalah yang Anda inginkan. Gunakan transform="translate(x,y)"untuk memindahkan gsekitar dan hal-hal di dalam gakan bergerak dalam kaitannya dengan g.

— codedread
sumber

22

Ada dua cara untuk mengelompokkan beberapa bentuk SVG dan memposisikan grup:

Yang pertama digunakan <g>dengan transformatribut seperti yang ditulis Harun. Tetapi Anda tidak bisa hanya menggunakan xatribut pada <g>elemen.

Cara lain adalah dengan menggunakan <svg>elemen bersarang .

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

Dengan cara ini, # group1 svg bersarang di #parent, dan x=10relatif terhadap svg induk. Namun, Anda tidak dapat menggunakan transformatribut pada <svg>elemen, yang sangat bertentangan dengan <g>elemen.

— fengshuo
sumber

13

mengapa <g> tidak memiliki atribut kapak dan y sementara semua tag svg lainnya memilikinya? itu berarti posisi selalu absolut dalam <svg> ... tidak ada posisi relatif,

— menyatukan kembali

2

komite sumber terbuka seperti itu.

— Muhammad Umer

Saya setuju ... sepertinya ini pilihan desain yang buruk. Cukup dengan menambahkan X-transform grup memerlukan penulisan string yang berpotensi rumit dan menyimpan semua variabel di tempat lain

— Eyelash

9

@ user1952009: ada kemungkinan - hanya kesempatan - bahwa Anda tidak benar-benar memahami pilihan desain yang masuk ke SVG.

— Paul D. Waite

3

<g> untuk pengelompokan. Itu tidak mewakili bentuk apa pun pada dirinya sendiri sehingga tidak masuk akal untuk memiliki lokasi atau ukuran. Masuk akal untuk memiliki atribut transform , yang dapat Anda baca seperti "terapkan transformasi ini ke seluruh grup".

— AlQafir