SVG => लाइन

पैरामीटर

गुण	विवरण
x1	लाइन की शुरुआत की क्षैतिज स्थिति।
y1	लाइन की शुरुआत की ऊर्ध्वाधर स्थिति।
x2	पंक्ति के अंत की क्षैतिज स्थिति।
y2	पंक्ति के अंत की ऊर्ध्वाधर स्थिति।
आघात	लाइन का रंग।
रेखा की चौड़ाई	लाइन की चौड़ाई।
स्ट्रोक-अस्पष्टता	लाइन की अस्पष्टता।
स्ट्रोक-dasharray	लाइन के लिए डैश पैटर्न
स्ट्रोक-linecap	कैसे लाइन अंत प्रस्तुत करता है

टिप्पणियों

एसवीजी 'लाइन' तत्व के बारे में विस्तृत जानकारी एसवीजी के लिए डब्ल्यू 3 सी सिफारिश में पाई जा सकती है।

विकर्ण लाल रेखाओं का उपयोग करके एक क्रॉस बनाएं

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <line x1="10" y1="10" x2="100" y2="100" stroke="red" stroke-width="10" />
    <line x1="100" y1="10" x2="10" y2="100" stroke="red" stroke-width="10" />
</svg>

परिणाम:

स्ट्रोक-दशहरा के साथ धराशायी रेखा ड्राइंग

<svg width="400px" height="400px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <line x1="10" y1="10" x2="300" y2="10" stroke="red" stroke-width="10" stroke-dasharray="20,2,5,2"/>
</svg>

परिणाम

स्ट्रोक-दशहरा के विभिन्न उदाहरण:

<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
  <line stroke-dasharray="5, 5"              x1="10" y1="10" x2="190" y2="10" />
  <line stroke-dasharray="5, 10"             x1="10" y1="30" x2="190" y2="30" />
    <line stroke-dasharray="10, 5"             x1="10" y1="50" x2="190" y2="50" />
    <line stroke-dasharray="5, 1"              x1="10" y1="70" x2="190" y2="70" />
    <line stroke-dasharray="1, 5"              x1="10" y1="90" x2="190" y2="90" />
    <line stroke-dasharray="0.9"               x1="10" y1="110" x2="190" y2="110" />
    <line stroke-dasharray="15, 10, 5"         x1="10" y1="130" x2="190" y2="130" />
    <line stroke-dasharray="15, 10, 5, 10"     x1="10" y1="150" x2="190" y2="150" />
    <line stroke-dasharray="15, 10, 5, 10, 15" x1="10" y1="170" x2="190" y2="170" />
    <line stroke-dasharray="5, 5, 1, 5"        x1="10" y1="190" x2="190" y2="190" />
    <style><![CDATA[
    line{
        stroke: red;
        stroke-width: 2;
    }
    ]]></style>
 </svg>

परिणाम:

स्ट्रोक-लाइनकैप का उपयोग करते हुए लाइन कैप विकल्प

<svg width="600px" height="400px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  
    <line x1="10" y1="20" x2="300" y2="20" stroke="red" stroke-width="20" stroke-linecap="butt"/>
      <text x="320" y="20">stroke-linecap="butt" (default)</text>
    <line x1="10" y1="70" x2="300" y2="70" stroke="red" stroke-width="20" stroke-linecap="round"/>
      <text x="320" y="70">stroke-linecap="round"</text>
    <line x1="10" y1="120" x2="300" y2="120" stroke="red" stroke-width="20" stroke-linecap="square"/>
      <text x="320" y="120">stroke-linecap="square"</text>
</svg>

परिणाम

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

SVG
लाइन

खोज…