SVG Konumlandırma

203

SVG ile oynuyorum ve konumlandırma ile ilgili birkaç sorun yaşıyorum. gGrup etiketinde bulunan şekiller bir dizi var . Bir kap gibi kullanmayı umuyordum, bu yüzden x konumunu ayarlayabilirdim ve sonra o gruptaki tüm öğeler de hareket ederdi. Ancak bu mümkün görünmüyor.

Çoğu insan birlikte hareket etmek istediğiniz bir grup unsuru nasıl konumlandırır?
Göreli konumlandırma kavramı var mı? örneğin ebeveynine göre

svg position grouping

— ChrisInCambo
kaynak

276

G öğesindeki her şey mevcut dönüşüm matrisine göre konumlandırılır.

İçeriği taşımak için, dönüşümü g öğesine yerleştirmeniz yeterlidir:

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

Bağlantılar: Örnek dan SVG 1.1 spec

— Aaron Digulla
kaynak

73

Önceki cevaba daha kısa bir alternatif var. SVG Elements, svg öğelerini yuvalayarak da gruplandırılabilir:

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

İki dikdörtgen aynıdır (renklerin dışında), ancak üst svg öğelerinin farklı x değerleri vardır.

Bkz. Http://tutorials.jenkov.com/svg/svg-element.html .

— Kağan Kayal
kaynak

33

Doğru, SVG öğesi bir gruplama öğesi de olabilir. SVG öğesinin varsayılan olarak (en azından şu anda Chrome'da) kırpma uyguladığını belirtmek istedim. Bu, herhangi bir taşmanın görünmeyeceği anlamına gelir. "G" öğesinin aksine. Sadece overflow = "visible" olarak ayarlayın ve eğer sizi ısırırsa işinize geri dönersiniz.

— bladnman

1

Bir grup elementi yüzdelerle çevirmek istiyorsanız kullanışlıdır: stackoverflow.com/a/17103928/470117

— mems

14

G yerine svg kullanmanın bir sakıncası var mı?

— grabantot

34

Diğer yorumda belirtildiği gibi transform, göğe üzerindeki özellik istediğiniz şeydir. Etrafında transform="translate(x,y)"hareket etmek için kullanın gve girade içindeki şeyler ile ilgili olarak hareket edecektir g.

— codedread
kaynak

22

Birden çok SVG şeklini gruplamanın ve grubu konumlandırmanın iki yolu vardır:

Aaron'un yazdığı gibi öznitelik <g>ile ilk kullanan transform. Ancak öğede yalnızca bir xözellik kullanamazsınız <g>.

Diğer yol, iç içe <svg>eleman kullanmaktır .

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

Bu şekilde, # group1 svg #parent içinde yuvalanır ve x=10üst svg öğesine görecelidir. Ancak, öğe transformüzerinde <svg>tam tersi olan niteliği kullanamazsınız <g>.

— Fengshuo
kaynak

13

diğer tüm svg etiketlerinde neden <g> ax ve y özniteliği yok? Bu, bir <svg> konumunda konumun her zaman mutlak olduğu anlamına gelir ... göreceli konum yok,

— 15:18

2

açık kaynak komiteleri böyledir.

— Muhammed Umer

Kabul ediyorum ... kötü bir tasarım seçeneği gibi görünüyor. Bir grubun X-dönüşümünü artırmak, potansiyel olarak karmaşık bir dize yazmayı ve tüm değişkenleri başka bir yerde saklamayı gerektirir

— Kirpik

9

@ user1952009: SVG'ye giren tasarım seçeneklerini gerçekten anlamadığınız bir şans - sadece bir şans - var.

— Paul

3

<g> gruplama içindir. Kendi başına herhangi bir şekli temsil etmez, bu nedenle bir konuma veya bir boyuta sahip olması mantıklı olmaz. Yine de "bu dönüşümü tüm gruba uygula" gibi okuyabileceğiniz bir dönüşüm özelliğine sahip olmak mantıklıdır .

— AlQafir

0

Bunun eski olduğunu biliyorum ama ne bir <svg>grup etiketi ne de <g>karşılaştığım sorun düzeltildi. Üzerinde animasyon bulunan bir etiketin y konumunu ayarlamam gerekiyordu.

Çözüm hem ve etiketini birlikte kullanmaktı:

<svg y="1190" x="235">
   <g class="light-1">
     <path />
   </g>
</svg>

— Kolay Kod
kaynak