এসভিজি (SVG) হল একটি অত্যন্ত শক্তিশালী গ্রাফিক্স ফরম্যাট যা XML ভিত্তিক। এর মাধ্যমে ভেক্টর গ্রাফিক্স তৈরি করা যায়, যা স্কেলেবল এবং রেসপন্সিভ। এসভিজি উপাদানগুলিকে JavaScript ব্যবহার করে DOM (Document Object Model) এর মাধ্যমে নিয়ন্ত্রণ করা এবং পরিবর্তন করা যায়। এর ফলে, আপনি ডায়নামিক এবং ইন্টারঅ্যাকটিভ গ্রাফিক্স তৈরি করতে পারেন যা ব্যবহারকারীর ইন্টারঅ্যাকশনের সাথে প্রতিক্রিয়া জানায়।
JavaScript দিয়ে SVG Element Manipulation
এসভিজি এলিমেন্টের সাথে কাজ করার জন্য JavaScript ব্যবহার করা হয় যাতে আপনি তাদের অবস্থান, আকার, রঙ, অ্যানিমেশন ইত্যাদি পরিবর্তন করতে পারেন। JavaScript DOM এর মাধ্যমে এসভিজি উপাদানকে অ্যাক্সেস করা এবং তার সাথে ইন্টারঅ্যাকট করতে পারবেন।
1. SVG Element নির্বাচন এবং Manipulation
আপনি JavaScript ব্যবহার করে এসভিজি উপাদান যেমন circle, rect, line, path ইত্যাদি নির্বাচন করতে পারেন এবং সেগুলোর অ্যাট্রিবিউট পরিবর্তন করতে পারেন।
উদাহরণ: একটি এসভিজি বৃত্তের রঙ পরিবর্তন করা।
<svg id="mySVG" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="100" cy="100" r="50" fill="red" />
</svg>
<script>
// বৃত্তের এলিমেন্ট নির্বাচন
const circle = document.getElementById("myCircle");
// বৃত্তের রঙ পরিবর্তন
circle.setAttribute("fill", "blue");
</script>
এখানে:
getElementById("myCircle")ব্যবহার করে বৃত্ত (circle) নির্বাচন করা হয়েছে।setAttribute("fill", "blue")দিয়ে বৃত্তের রঙ পরিবর্তন করা হয়েছে।
2. CSS স্টাইলিং JavaScript এর মাধ্যমে
JavaScript ব্যবহার করে আপনি এসভিজি উপাদানগুলির স্টাইলিং পরিবর্তন করতে পারেন, যেমন stroke, stroke-width, fill ইত্যাদি।
উদাহরণ: বৃত্তের বর্ডার এবং রঙ পরিবর্তন।
<svg id="mySVG" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="100" cy="100" r="50" fill="red" stroke="black" stroke-width="5" />
</svg>
<script>
// বৃত্তের এলিমেন্ট নির্বাচন
const circle = document.getElementById("myCircle");
// বর্ডার এবং রঙ পরিবর্তন
circle.style.stroke = "green";
circle.style.strokeWidth = "10";
circle.style.fill = "yellow";
</script>
এখানে, style.stroke, style.strokeWidth, এবং style.fill ব্যবহার করে বৃত্তের স্টাইল পরিবর্তন করা হয়েছে।
3. অ্যানিমেশন এবং ট্রান্সফরমেশন
JavaScript দিয়ে আপনি এসভিজি উপাদানগুলিতে অ্যানিমেশন এবং ট্রান্সফর্মেশন প্রয়োগ করতে পারেন। আপনি setInterval, requestAnimationFrame বা CSS অ্যানিমেশন ব্যবহার করতে পারেন।
উদাহরণ: একটি বৃত্তের স্থানান্তর (Translate) করা।
<svg id="mySVG" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="100" cy="100" r="50" fill="red" />
</svg>
<script>
const circle = document.getElementById("myCircle");
let x = 100; // initial x position
function moveCircle() {
x += 5; // increment x position
circle.setAttribute("cx", x); // update x position of the circle
// animation loop
if (x < 200) {
requestAnimationFrame(moveCircle);
}
}
moveCircle(); // start the animation
</script>
এখানে, requestAnimationFrame ব্যবহার করে বৃত্তটির cx অ্যাট্রিবিউট পরিবর্তন করা হচ্ছে, যার ফলে বৃত্তটি এক জায়গা থেকে আরেক জায়গায় সরছে।
4. ইন্টারঅ্যাকটিভিটি যোগ করা
JavaScript দিয়ে আপনি এসভিজি উপাদানে ইভেন্ট লিসেনার যোগ করতে পারেন, যা ব্যবহারকারীর ইন্টারঅ্যাকশনের জন্য প্রতিক্রিয়া তৈরি করবে, যেমন mouseover, click, mousemove ইত্যাদি।
উদাহরণ: একটি বৃত্তে মাউস ক্লিক করলে তার রঙ পরিবর্তন করা।
<svg id="mySVG" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="100" cy="100" r="50" fill="red" />
</svg>
<script>
const circle = document.getElementById("myCircle");
// মাউস ক্লিক করলে রঙ পরিবর্তন করা
circle.addEventListener("click", function() {
circle.setAttribute("fill", "blue");
});
</script>
এখানে, বৃত্তে মাউস ক্লিক করলে তার রঙ পরিবর্তন হবে।
5. এসভিজি Path Manipulation
Path ট্যাগটি এসভিজি গ্রাফিক্সের সবচেয়ে শক্তিশালী এবং নমনীয় উপাদান। JavaScript এর মাধ্যমে আপনি পাথের আকৃতি এবং পথ পরিবর্তন করতে পারেন।
উদাহরণ: পাথের আকার পরিবর্তন।
<svg id="mySVG" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path id="myPath" d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black" stroke-width="5"/>
</svg>
<script>
const path = document.getElementById("myPath");
// পাথের নির্দেশিকা পরিবর্তন
path.setAttribute("d", "M50 50 H 150 V 150 H 50 Z");
</script>
এখানে, পাথের d অ্যাট্রিবিউট পরিবর্তন করে পাথের আকৃতি পরিবর্তন করা হয়েছে।
সারাংশ
JavaScript এর মাধ্যমে এসভিজি এলিমেন্টের manipulation আপনাকে গ্রাফিক্সের আকৃতি, আকার, রঙ, অ্যানিমেশন, এবং ইন্টারঅ্যাকটিভিটি পরিবর্তন করতে সাহায্য করে। এসভিজি এবং JavaScript এর সংমিশ্রণ ওয়েব ডেভেলপমেন্টে খুবই শক্তিশালী, বিশেষ করে যখন ডায়নামিক এবং ইন্টারঅ্যাকটিভ গ্রাফিক্স তৈরি করতে হয়।
Read more
