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

HTML5 SVG में दीर्घवृत्त (Ellipse) कैसे बनाएं?


SVG का अर्थ स्केलेबल वेक्टर ग्राफिक्स है। HTML SVG में दीर्घवृत्त बनाने के लिए SVG <ellipse> एलिमेंट का उपयोग करें।

उदाहरण

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 दीर्घवृत्त</title> </head> <body> <h2>HTML5 SVG दीर्घवृत्त</h2> <svg id = "svgelem" width = "300" height = "200" xmlns = "https://www.w3.org/2000/svg"> <ellipse cx = "120" cy = "50" rx = "100" ry = "50" fill = "blue" /> </svg> </body> </html>

cx और cy दीर्घवृत्त के केंद्र के कोऑर्डिनेट्स हैं। rx x-त्रिज्या है और ry y-त्रिज्या है।

  1. SVG में खोखला सर्कल (Hollow Circle) कैसे बनाएं? SVG में खोखला सर्कल (Hollow Circle) कैसे बनाएं?

    SVG में खोखला सर्कल बनाने के लिए <circle> एलिमेंट का उपयोग करें। इसके लिए fill=none का उपयोग करें और आउटलाइन बनाएं।उदाहरणSVG में खोखला सर्कल बनाने का तरीका सीखने के लिए निम्न कोड चलाएं:<!DOCTYPE html> <html>    <head>       <title>HTML5 SVG खोखल

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

    HTML5 में SVG इमेज का उपयोग करने के लिए, <img> एलिमेंट या <svg> का उपयोग करें। SVG फ़ाइलें जोड़ने के लिए, आप HTML में <img>, <object>, या <embed> एलिमेंट का उपयोग कर सकते हैं। अपनी आवश्यकता के अनुसार उनमें से किसी एक को चुनें।यहां बताया गया है कि आप SVG इमेज कैसे जोड़ स

  1. HTML5 में strokeText() से टेक्स्ट कैसे ड्रा करें? HTML5 में strokeText() से टेक्स्ट कैसे ड्रा करें?

    HTML5 में कैनवास पर टेक्स्ट ड्रा करने के लिए strokeText() मेथड का उपयोग करें। यह मेथड दिए गए टेक्स्ट को निर्दिष्ट x और y कोऑर्डिनेट पर स्ट्रोक करता है। डिफ़ॉल्ट रंग काला होता है। सिंटैक्स strokeText(text, x, y [, maxWidth]) पैरामीटर्स S. No पैरामीटर विवरण 1 text लिखा जाने वाला टेक्स्ट 2 x x