एसवीजी <path>

SVG पथ - <path>

<path> एलिमेंट का इस्तेमाल पथ को परिभाषित करने के लिए किया जाता है।

नीचे की कमानों को पथ डाटा में इस्तेमाल किया जा सकता है:

• M = moveto (जाना)
• L = lineto (रेखा बनाना)
• H = horizontal lineto (स्थिर रेखा)
• V = vertical lineto (ऊर्ध्वाधर रेखा)
• C = curveto (कर्व्स)
• S = smooth curveto (सही कर्व्स)
• Q = quadratic Bézier curve (द्विगुणी बेजेलर कर्व्स)
• T = smooth quadratic Bézier curveto (सही द्विगुणी बेजेलर कर्व्स)
• A = elliptical Arc (दीर्घवृत्तीय धारा)
• Z = closepath (पथ बंद करना)

ध्यान: ऊपर की सभी कमानों को छोटे अक्षरों से भी दर्शाया जा सकता है। बड़े अक्षरों का इस्तेमाल अभिकृत स्थिति के लिए किया जाता है, छोटे अक्षरों का इस्तेमाल सापेक्षिक स्थिति के लिए किया जाता है।

उदाहरण 1

नीचे का उदाहरण एक पथ को परिभाषित करता है, जिसकी शुरूआत 150,0 से होती है, फिर उससे 75,200 के स्थान तक एक रेखा बनाता है, फिर उससे 225,200 के स्थान तक एक रेखा बनाता है, और अंत में पथ को 150,0 में बंद करता है।

यह SVG कोड है:

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

स्वयं को प्रयास करें

उदाहरण 2

बेजेलर कर्व्स (Bézier curves) का इस्तेमाल अथक तरीके से बढ़ा-घटाने के लिए सही कर्व्स का मॉडलिंग करने के लिए किया जाता है। आमतौर पर, उपयोगकर्ता दो अंतिम बिन्दुओं और एक या दो नियंत्रण बिन्दुओं को चुनते हैं। एक नियंत्रण बिन्दु वाले बेजेलर कर्व्स को द्विगुणी बेजेलर कर्व्स (quadratic Bézier curve) कहा जाता है, दो नियंत्रण बिन्दु वाले बेजेलर कर्व्स को त्रिगुणी (cubic) कहा जाता है।

इसमें एक द्वितीयक बीजीय वक्र को बनाया गया है, जिसमें एंड सी क्रमश: शुरुआती और अंतिम बिन्दु हैं, बी नियंत्रण बिन्दु है:

यह SVG कोड है:

<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" />
  <!-- 标记相关的点 -->
  <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>
  <!-- 给点添加标签 -->
  <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>

स्वयं को प्रयास करें

बहुत कठिन लग रहा है? हाँ！！！रूट ड्रेइंग बहुत कठिन है, इसलिए ज़रूरी सूचना दी जाती है कि जटिल ग्राफिक्स को बनाने के लिए एसवीजी एडिटर का इस्तेमाल करें।