एसवीजी हाफ सर्कल: यह क्यों घूमता है?

Question

मैं एसवीजी तत्वों के साथ प्रयोग कर रहा हूं। मैं एक साधारण आधा सर्कल बनाने की कोशिश कर रहा हूं लेकिन मेरा आधा सर्कल कुछ कारणों से घूमता है? घुमाए जाने के लिए मैं आधा चक्र कैसे प्राप्त कर सकता हूं?

मेरे पद्धति है:

• एसवीजी 'कैनवास' 400px तक 400 है, th0e आधा चक्र के 180px
• MoveTo बिंदु एक त्रिज्या होगा: 20,200 - M20,200
• लाइनटो: एक रेखा 360 पीएक्स लंबी & वाई स्थिति को नहीं बदलती है - एल 360,0
• आर्कटो: सर्कल को पूरा करने के लिए एक आर्क खींचें, त्रिज्या

  <svg width="400" height="400"> 
      <path d="M20,200 L360,0 A180,180 0 0,1 20,200 z" 
       style="fill:#ff0000; 
        fill-opacity: 1; 
        stroke:black; 
        stroke-width: 1"/> 
  </svg> 
  

  पुनश्च:: मैं एक पाई चार्ट केवल 275degrees है कि बनाना चाहते हैं सबसे अच्छा तरीका है, होगा A180,180 0 0,1 20.200

कोड में यह है - चाप 180px है 2 पथ बनाना, एक 180 डिग्री (ऊपर आधा चक्र) & 90 डिग्री का दूसरा मार्ग? या 1 पथ के साथ इसे बनाना संभव है? क्या कोई भी एसवीजी कोड उदाहरण दिखाने के लिए पर्याप्त दयालु होगा?

Answer 1

lineto command का उपयोग करते समय, अपरकेस-एल (L) एक पूर्ण समन्वय निर्दिष्ट करता है जबकि लोअरकेस-एल (l) एक सापेक्ष चाल निर्दिष्ट करता है। ऐसा लगता है कि आप रिश्तेदार कमांड का उपयोग करना चाहते थे।

जहाँ तक एक उदाहरण के रूप, W3 path's page पर पाई-चार्ट की तरह एक एक एकल पथ का उपयोग करता है:

नोट:

<path d="M300,200 h-150 a150,150 0 1,0 150,-150 z" 
    fill="red" stroke="blue" stroke-width="5" /> 

इस चित्र में लाल हिस्सा पैदा करता है लोअरकेस (रिश्तेदार) कमांड का उदार उपयोग।