ایس وی جی <rect>

SVG کی کچھ مورفی عناصر موجود ہیں جو پروگرامر استعمال اور عمل پر آسانی سے استعمال کرسکتا ہے۔

SVG شپ

SVG کی کچھ مورفی عناصر موجود ہیں جو پروگرامر استعمال اور عمل پر آسانی سے استعمال کرسکتا ہے:

  • مستطیل <rect>
  • سیرکل <circle>
  • ایلیپس <ellipse>
  • لائن <line>
  • پولی لائن <polyline>
  • مولتیگون <polygon>
  • پتھ <path>

آئندہ فصل میں آپ کو ان عناصر کا تعریف دیا جائے گا، ابتدا میں مستطیل عناصر سے شروع کیا جائے گا。

<rect> تگ

<rect> تگ مستطیل بنانے اور مستطیل کی متعدد اقسام بنانے کے لئے استعمال کی جاتی ہے。

اس کا کام کی فہم آئیں تو یہ کوپی پیپر میں کاپی کریں، اس کو "rect1.svg" فائل کے نا ما کے ساتھ محفوظ کریں۔ اس فائل کو ویب ڈائریکٹری میں رکھیئے:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>

کد تفسیر:

  • rect ویژگت کا width اور height ویژگت مستطیل کی چوڑائی اور اونچائی کا تعین کرتی ہیں
  • نمائی-نویسی ویژگت نمائی-نویسی ویژگت کا تعین کرنے کے لئے استعمال کی جاتی ہے
  • نمائی-نویسی fill مستطیل کی پرن کی رنگ کا تعین کرتی ہے (rgb کا ماخذ، رنگ کا نام یا چودہ رقمی کا ماخذ)
  • نمائی-نویسی stroke-width مستطیل کی کیرنر کی چوڑائی کا تعین کرتی ہے
  • نمائی-نویسی stroke مستطیل کی کیرنر کی رنگ کا تعین کرتی ہے

اس نمائی-نویسی کو دیکھیں

آئیں دیکھیں کہ ایک اور نمائی-نویسی جس میں نئی ویژگت شامل ہیں:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>

مثال دسایا:

  • یہ ویژگت مستطیل کی لائیبھان سائیڈ کی پوزیشن کا تعین کرتی ہے (مثلاً اگر x="0" ہو تو مستطیل کی لائیبھان سائیڈ براہ راست بروئر کی لائیبھان سائیڈ سے 0 پیکسل کی دوری پر ہوگی)
  • یہ ویژگت مستطیل کی اوپر سائیڈ کی پوزیشن کا تعین کرتی ہے (مثلاً یہ اگر y="0" ہو تو مستطیل کی اوپر سائیڈ براہ راست بروئر کی اوپر سائیڈ سے 0 پیکسل کی دوری پر ہوگی)
  • نمائی-نویسی fill-opacity نمائی-نویسی نمازنائی کا شفافیت دسایا اٹھتا ہے (قانونی رینج: 0 - 1)
  • نمائی-نویسی stroke-opacity نمائی-نویسی نمازنائی کا شفافیت دسایا اٹھتا ہے (قانونی رینج: 0 - 1)

مثال دیکھیئے

لایکا پورا اپنایا:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>

کد تفسیر:

CSS کا opacity خصوصیات کو پورے عنصر کی شفافیت کا معیار طے کرتا ہے (قانونی دائری: 0 - 1)

مثال دیکھیئے

آخری مثال، چوکیدار مستطیل کی تعمیر کے لئے:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>

کد تفسیر:

rx اور ry خصوصیات کا استعمال سے چوکیدار مستطیل کا وجود ممکن ہوتا ہے

مثال دیکھیئے