SVG स्ट्राइक प्रोपर्टी

SVG स्ट्राइक प्रोपर्टी

SVG विस्तृत बारिका गुण प्रदान करता है। इस चैप्टर में हम निम्नलिखित विषय पर चर्चा करेंगे:

• stroke
• stroke-width
• stroke-linecap
• stroke-dasharray

सभी लिखाई गुण जिस तरह की लाइन, टेक्स्ट और एलिमेंट के किनारे (जैसे गोलाकार) के लिए उपयोगी हैं।

SVG stroke गुण

stroke गुण का प्रयोग लाइन, टेक्स्ट या एलीमेंट के कंटूर का रंग परिभाषित करता है:

यह SVG कोड है:

<svg height="80" width="300">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="black" d="M5 40 l215 0" />
    <path stroke="blue" d="M5 60 l215 0" />
  </g>
</svg>

अपने आप साबित करें

SVG stroke-width गुण

stroke-width गुण लाइन, टेक्स्ट या एलीमेंट के कंटूर की लंबाई को परिभाषित करता है:

यह SVG कोड है:

<svg height="80" width="300">
  <g fill="none" stroke="black">
    <path stroke-width="2" d="M5 20 l215 0" />
    <path stroke-width="4" d="M5 40 l215 0" />
    <path stroke-width="6" d="M5 60 l215 0" />
  </g>
</svg>

अपने आप साबित करें

SVG stroke-linecap गुण

stroke-linecap गुण का प्रयोग खुले पथ के विभिन्न प्रकार के अंत निर्धारित करता है:

यह SVG कोड है:

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>

अपने आप साबित करें

SVG stroke-dasharray गुण

stroke-dasharray गुण लाइन का रेखांकन बनाने के लिए प्रयोग होता है:

यह SVG कोड है:

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>

अपने आप साबित करें