एचटीएमएल ग्राफिक्स

ग्राफिक्स होम

गूगल मानचित्र

मानचित्र परिचय मैप्स बेसिक मैप्स ओवरले मानचित्र घटनाक्रम मानचित्र नियंत्रण मानचित्र प्रकार मानचित्र संदर्भ

एसवीजी ट्यूटोरियल

एसवीजी परिचय एचटीएमएल में एसवीजी एसवीजी आयत एसवीजी सर्किल एसवीजी एलिप्से एसवीजी लाइन एसवीजी बहुभुज एसवीजी पॉलीलाइन एसवीजी पथ एसवीजी पाठ एसवीजी पथपाकर एसवीजी फ़िल्टर परिचय एसवीजी धुंधला प्रभाव एसवीजी ड्रॉप शैडो एसवीजी रैखिक एसवीजी रेडियल एसवीजी उदाहरण एसवीजी संदर्भ

कैनवास ट्यूटोरियल

कैनवास परिचय कैनवास ड्राइंग कैनवास निर्देशांक कैनवास ग्रेडिएंट कैनवास पाठ कैनवास छवियां कैनवास संदर्भ

कैनवास घड़ी

घड़ी परिचय घडी का मुख घड़ी संख्या हाथ घड़ी घड़ी प्रारंभ

एचटीएमएल गेम

खेल परिचय खेल कैनवास खेल के घटक खेल नियंत्रक खेल बाधाएं गेम स्कोर खेल छवियां खेल ध्वनि गेम ग्रेविटी खेल उछल खेल रोटेशन खेल आंदोलन

एसवीजी <पाठ>


एसवीजी पाठ - <पाठ>

टेक्स्ट को परिभाषित करने के लिए <text> तत्व का उपयोग किया जाता है।


उदाहरण 1

एक पाठ लिखें:

I love SVG! Sorry, your browser does not support inline SVG.

यहाँ एसवीजी कोड है:

उदाहरण

<svg height="30" width="200">
  <text x="0" y="15" fill="red">I love SVG!</text>
</svg>

उदाहरण 2

टेक्स्ट को घुमाएं:

I love SVG Sorry, your browser does not support inline SVG.

यहाँ एसवीजी कोड है:

उदाहरण

<svg height="60" width="200">
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>


उदाहरण 3

<text> तत्व को <tspan> तत्व के साथ किसी भी संख्या में उप-समूहों में व्यवस्थित किया जा सकता है। प्रत्येक <tspan> तत्व में भिन्न स्वरूपण और स्थिति हो सकती है।

कई पंक्तियों पर पाठ (<tspan> तत्व के साथ):

Several lines: First line. Second line. Sorry, your browser does not support inline SVG.

यहाँ एसवीजी कोड है:

उदाहरण

<svg height="90" width="200">
  <text x="10" y="20" style="fill:red;">Several lines:
    <tspan x="10" y="45">First line.</tspan>
    <tspan x="10" y="70">Second line.</tspan>
  </text>
</svg>

उदाहरण 4

एक लिंक के रूप में टेक्स्ट (<a> तत्व के साथ):

I love SVG! Sorry, your browser does not support inline SVG.

यहाँ एसवीजी कोड है:

उदाहरण

<svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="https://www.w3schools.com/graphics/" target="_blank">
    <text x="0" y="15" fill="red">I love SVG!</text>
  </a>
</svg>