SVG <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 এক্সপ্রোপ্রি চতুর্ভুজের প্রশস্ততা এবং উচ্চতা নির্দেশ করতে পারে
  • style এটি CSS এক্সপ্রোপ্রি নির্দেশ করার জন্য ব্যবহৃত হয়
  • CSS-এর fill এটি চতুর্ভুজের পূর্ণাঙ্গ রঙ নির্দেশ করে (rgb মান, রঙের নাম বা সবুজী হেক্সাডেসিমাল মান)
  • CSS-এর stroke-width এটি চতুর্ভুজের হাড়ের প্রশস্ততা নির্দেশ করে
  • CSS-এর 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 এটি চতুর্ভুজের বামপাশের অবস্থান নির্দেশ করে (উদাহরণ, x="0" তৈরি করলে চতুর্ভুজটি ব্রাউজার বান্ধানের বামপাশের দূরত্ব 0px)
  • y এটি চতুর্ভুজের শীর্ষের অবস্থান নির্দেশ করে (উদাহরণ, y="0" তৈরি করলে চতুর্ভুজটি ব্রাউজার বান্ধানের শীর্ষের দূরত্ব 0px)
  • CSS-এর fill-opacity এটি পূর্ণাঙ্গ রঙের স্পষ্টতা নির্দেশ করে (সুযোগ্য পরিমাণ: 0 - 1)
  • CSS-এর 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 প্রতিযোগী গুণ সরকারী দ্বারা রংটির কোণটি সুতোয়ার্ণ করতে পারে

উদাহরণ দেখুন