การจัดตำแหน่ง SVG

ฉันกำลังเล่นกับ SVG และกำลังมีปัญหาเล็กน้อยกับการวางตำแหน่ง ฉันมีชุดของรูปร่างที่อยู่ในgแท็กกลุ่ม ฉันหวังว่าจะใช้มันเหมือนภาชนะดังนั้นฉันจึงสามารถกำหนดตำแหน่ง x ได้จากนั้นองค์ประกอบทั้งหมดในกลุ่มนั้นก็จะเคลื่อนไหวเช่นกัน แต่ดูเหมือนจะเป็นไปไม่ได้

1. คนส่วนใหญ่ไปเกี่ยวกับการวางตำแหน่งกลุ่มองค์ประกอบที่คุณต้องการย้ายควบคู่อย่างไร
2. มีแนวคิดเรื่องการวางตำแหน่งสัมพัทธ์หรือไม่? เช่นที่สัมพันธ์กับผู้ปกครอง

ทุกอย่างในองค์ประกอบ g อยู่ในตำแหน่งที่สัมพันธ์กับเมทริกซ์การแปลงปัจจุบัน

หากต้องการย้ายเนื้อหาเพียงแค่ใส่การแปลงในองค์ประกอบ g:

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

ลิงค์: ตัวอย่างจากข้อกำหนด SVG 1.1

มีทางเลือกที่สั้นกว่าสำหรับคำตอบก่อนหน้านี้ องค์ประกอบ SVG ยังสามารถจัดกลุ่มได้โดยการซ้อนองค์ประกอบ 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>

สี่เหลี่ยมสองรูปนั้นเหมือนกัน (นอกเหนือจากสี) แต่องค์ประกอบ svg หลักมีค่า x แตกต่างกัน

ดู http://tutorials.jenkov.com/svg/svg-element.html

ดังที่กล่าวไว้ในความคิดเห็นอื่นtransformแอตทริบิวต์ในgองค์ประกอบคือสิ่งที่คุณต้องการ ใช้transform="translate(x,y)"เพื่อย้ายgไปรอบ ๆ และสิ่งที่อยู่ภายในจะย้ายในความสัมพันธ์กับgg

มีสองวิธีในการจัดกลุ่มรูปร่าง SVG หลายแบบและจัดกลุ่ม:

เป็นคนแรกที่ใช้<g>กับtransformคุณลักษณะตามที่แอรอนเขียน แต่คุณไม่สามารถใช้xคุณลักษณะกับ<g>องค์ประกอบได้

อีกวิธีคือใช้<svg>องค์ประกอบ ซ้อนกัน

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

ด้วยวิธีนี้ # group1 svg ถูกซ้อนใน #parent และx=10สัมพันธ์กับ parent svg อย่างไรก็ตามคุณไม่สามารถใช้transformแอตทริบิวต์กับ<svg>องค์ประกอบซึ่งเป็นสิ่งที่ตรงกันข้ามกับ<g>องค์ประกอบ