एसवीजी <पथ>
एसवीजी पथ - <पथ>
पथ को परिभाषित करने के लिए <पथ> तत्व का उपयोग किया जाता है।
पथ डेटा के लिए निम्न आदेश उपलब्ध हैं:
- एम = मूवटो
- एल = लिनेटो
- एच = क्षैतिज लाइनटो
- वी = लंबवत लाइनटो
- सी = वक्रतो
- एस = चिकनी वक्रतो
- क्यू = द्विघात बेज़ियर वक्र
- टी = चिकनी द्विघात बेज़ियर वक्रतो
- ए = अण्डाकार चाप
- जेड = क्लोजपाथ
नोट: उपरोक्त सभी कमांड को निचले अक्षरों में भी व्यक्त किया जा सकता है। बड़े अक्षरों का अर्थ है पूरी तरह से स्थित, निचले मामलों का मतलब अपेक्षाकृत स्थित है।
उदाहरण 1
नीचे दिया गया उदाहरण एक पथ को परिभाषित करता है जो स्थिति 150,0 से शुरू होकर 75,200 की स्थिति के लिए एक पंक्ति के साथ शुरू होता है, फिर वहां से 225,200 तक एक रेखा और अंत में पथ को वापस 150,0 पर बंद कर देता है:
यहाँ एसवीजी कोड है:
उदाहरण
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
उदाहरण 2
बेज़ियर कर्व्स का उपयोग चिकने कर्व्स को मॉडल करने के लिए किया जाता है जिन्हें अनिश्चित काल तक बढ़ाया जा सकता है। आम तौर पर, उपयोगकर्ता दो समापन बिंदुओं और एक या दो नियंत्रण बिंदुओं का चयन करता है। एक नियंत्रण बिंदु वाले बेज़ियर वक्र को द्विघात बेज़ियर वक्र कहा जाता है और दो नियंत्रण बिंदुओं वाले प्रकार को क्यूबिक कहा जाता है।
निम्न उदाहरण एक द्विघात बेज़ियर वक्र बनाता है, जहाँ A और C प्रारंभ और अंत बिंदु हैं, B नियंत्रण बिंदु है:
यहाँ एसवीजी कोड है:
उदाहरण
<svg height="400" width="450">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red"
stroke-width="3" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue"
stroke-width="5" fill="none" />
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Label the points -->
<g font-size="30" font-family="sans-serif" fill="black" stroke="none"
text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
</svg>
जटिल? हां!!!! पथों को खींचने में शामिल जटिलता के कारण जटिल ग्राफिक्स बनाने के लिए एसवीजी संपादक का उपयोग करने की अत्यधिक अनुशंसा की जाती है।