एसवीजी पोजिशनिंग

Question

मैं एसवीजी के साथ खेल रहा हूं और पोजिशनिंग में कुछ दिक्कतें आ रही हैं। मेरे पास आकृतियों की एक श्रृंखला है जो gसमूह टैग में निहित है । मैं एक कंटेनर की तरह इसका उपयोग करने की उम्मीद कर रहा था, इसलिए मैं इसकी x स्थिति निर्धारित कर सकता हूं और फिर उस समूह के सभी तत्व भी स्थानांतरित हो जाएंगे। लेकिन ऐसा संभव नहीं लगता।

1. अधिकांश लोग तत्वों के एक समूह की स्थिति के बारे में कैसे जाते हैं जो आप अग्रानुक्रम में स्थानांतरित करना चाहते हैं?
2. क्या सापेक्ष स्थिति की कोई अवधारणा है? अपने माता-पिता के सापेक्ष

Answer 1

जी तत्व में सब कुछ वर्तमान परिवर्तन मैट्रिक्स के सापेक्ष स्थित है।

सामग्री को स्थानांतरित करने के लिए, बस परिवर्तन को g तत्व में रखें:

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

लिंक: एसवीजी 1.1 कल्पना से उदाहरण

Answer 2

पिछले उत्तर के लिए एक छोटा विकल्प है। 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 देखें ।

Comments

सही, एसवीजी तत्व एक समूह तत्व भी हो सकता है। मैं यह इंगित करना चाहता था कि एसवीजी तत्व डिफ़ॉल्ट रूप से क्लिपिंग को लागू करता है (कम से कम इस समय क्रोम में)। इसका मतलब है कि कोई भी अतिप्रवाह दिखाई नहीं देगा। "जी" तत्व के विपरीत। बस अतिप्रवाह = "दृश्यमान" सेट करें और आप व्यवसाय में वापस आ गए हैं, अगर यह आपको काटता है।

— ब्लैडनमैन

: यदि आप प्रतिशत के साथ तत्वों के एक समूह अनुवाद करना चाहते हैं तो यह उपयोगी साबित stackoverflow.com/a/17103928/470117

— एमईएमएस

वहाँ जी के बजाय svg का उपयोग करने के लिए कोई कमियां हैं?

— हथियाकोट

Answer 3

जैसा कि अन्य टिप्पणी में उल्लेख किया गया है, तत्व transformपर विशेषता वह gहै जो आप चाहते हैं। चारों ओर transform="translate(x,y)"ले जाने के लिए उपयोग करें gऔर gइच्छा के भीतर चीजों के संबंध में कदम होगा g।

Answer 4

कई एसवीजी आकार समूह के लिए दो तरीके हैं और समूह की स्थिति:

विशेषता के <g>साथ पहली बार उपयोग के transformरूप में हारून ने लिखा था। लेकिन आप केवल तत्व xपर एक विशेषता का उपयोग नहीं कर सकते <g>।

दूसरा तरीका नेस्टेड <svg>तत्व का उपयोग करना है।

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

इस तरह, # समूह 1 svg #parent में नेस्टेड है, और x=10पेरेंट svg के सापेक्ष है। हालांकि, आप तत्व transformपर विशेषता का उपयोग नहीं कर सकते हैं <svg>, जो तत्व के काफी विपरीत है <g>।

Comments

क्यों <g> में कुल्हाड़ी और y विशेषता नहीं है जबकि अन्य सभी svg टैग हैं? इसका अर्थ है कि स्थिति हमेशा एक <svg> ... में कोई निरपेक्ष स्थिति नहीं है,

— पुनर्मिलन

ओपन सोर्स समितियां ऐसी हैं।

— मुहम्मद उमेर

मैं सहमत हूं ... यह एक खराब डिजाइन विकल्प की तरह लगता है। बस एक समूह के एक्स-परिवर्तन को बढ़ाने के लिए एक संभावित जटिल स्ट्रिंग लिखने और सभी चर कहीं और संग्रहीत करने की आवश्यकता होती है

— बरौनी

@ user1952009: एक मौका है - बस एक मौका - कि आप वास्तव में एसवीजी में गए डिज़ाइन विकल्पों को नहीं समझ पाएंगे।

— पॉल डी। वेट

<g> समूहन के लिए है। यह अपने आप में किसी भी आकार का प्रतिनिधित्व नहीं करता है इसलिए इसका कोई मतलब नहीं होगा कि इसका कोई स्थान या आकार है। यह एक परिवर्तन विशेषता है, जो आप "पूरे समूह के लिए इस परिवर्तन को लागू" जैसे पढ़ सकते हैं समझ में आता है ।

— AlQafir