Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> Javascript

HTML5 SVG में एक रेखा कैसे खींचे?

<घंटा/>

एसवीजी स्केलेबल वेक्टर ग्राफिक्स के लिए खड़ा है और एक्सएमएल में 2डी-ग्राफिक्स और ग्राफिकल अनुप्रयोगों का वर्णन करने के लिए एक भाषा है और एक्सएमएल को एसवीजी व्यूअर द्वारा प्रस्तुत किया जाता है। अधिकांश वेब ब्राउज़र एसवीजी प्रदर्शित कर सकते हैं जैसे वे पीएनजी, जीआईएफ, और जेपीजी प्रदर्शित कर सकते हैं।

HTML SVG में एक रेखा खींचने के लिए, SVG <लाइन> तत्व का उपयोग करें।

HTML5 SVG में एक रेखा कैसे खींचे?

उदाहरण

HTML5 SVG में रेखा कैसे खींचना है, यह जानने के लिए आप निम्न कोड चलाने का प्रयास कर सकते हैं।

<!DOCTYPE html>
<html>
   <head>
      <style>
         #svgelem {
            position: relative;
            left: 10%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>HTML5 SVG Line</title>
   </head>
   <body>
      <h2>HTML5 SVG Line</h2>
      <svg id = "svgelem" width = "300" height = "200" xmlns = "https://www.w3.org/2000/svg">
         <line x1 = "0" y1 = "0" x2 = "100" y2 = "100" style = "stroke:red;stroke-width:2"/>
      </svg>
   </body>
</html>

आउटपुट

HTML5 SVG में एक रेखा कैसे खींचे?


  1. HTML5 में SVG इमेज का उपयोग कैसे करें?

    HTML5 में SVG छवियों का उपयोग करने के लिए, तत्व या का उपयोग करें। SVG फ़ाइलें जोड़ने के लिए, आप HTML में , या तत्व का उपयोग कर सकते हैं। अपनी आवश्यकता के अनुसार उनमें से किसी एक को चुनें। यहां बताया गया है कि आप SVG इमेज कैसे जोड़ सकते हैं। यदि SVG को एक फ़ाइल के रूप में सहेजा जाता है, तो इसे सी

  1. HTML5 में लाइनटो () के साथ एक रेखा कैसे खींचना है?

    HTML में एक रेखा खींचने के लिए, कैनवास तत्व का उपयोग करें। कैनवास के साथ, रेखा खींचने के लिए लाइनटो () विधि का उपयोग करें। लाइनटू () विधि में x और y पैरामीटर मान शामिल हैं, जो रेखा को स्थान देते हैं। उदाहरण आप HTML5 में lineTo() के साथ एक रेखा खींचने के लिए निम्न कोड को चलाने का प्रयास कर सकते हैं

  1. टिंकर कैनवास पर एक रेखा कैसे खींचना है?

    टिंकर कैनवास विजेट का उपयोग कई उद्देश्यों के लिए किया जा सकता है जैसे आकार, वस्तुओं को चित्रित करना, ग्राफिक्स और छवियां बनाना। कैनवास पर एक रेखा खींचने के लिए, हम create_line(x,y,x1,y1, **options) का उपयोग कर सकते हैं विधि। टिंकर में, हम दो प्रकार की रेखाएँ खींच सकते हैं:सरल और धराशायी। हम डैश प्र