ViewBox এবং PreserveAspectRatio এর ব্যবহার

এসভিজি (SVG) একটি শক্তিশালী গ্রাফিক্স ফরম্যাট যা ওয়েব পেজে গ্রাফিক্স প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি শুধুমাত্র স্থির চিত্র নয়, বরং JavaScript এর মাধ্যমে ডায়নামিক অ্যানিমেশন এবং ইন্টারঅ্যাকটিভিটি যোগ করতে সক্ষম। JavaScript ব্যবহার করে আপনি এসভিজি উপাদানগুলির বিভিন্ন বৈশিষ্ট্য পরিবর্তন করতে পারেন, যেমন অবস্থান, আকার, রঙ, সাইজ ইত্যাদি। এই অ্যানিমেশন এবং ইন্টারঅ্যাকটিভিটি ওয়েব পেজকে আরও প্রাণবন্ত এবং ইউজার-ফ্রেন্ডলি করে তোলে।

1. JavaScript এর মাধ্যমে SVG অ্যানিমেশন

JavaScript ব্যবহার করে এসভিজি উপাদানগুলির অ্যানিমেশন তৈরি করা সম্ভব। আপনি setInterval(), requestAnimationFrame(), বা অন্যান্য JavaScript পদ্ধতি ব্যবহার করে অ্যানিমেশন পরিচালনা করতে পারেন। এসভিজি উপাদানগুলি এক্সেস করার জন্য document.getElementById() বা querySelector() পদ্ধতি ব্যবহার করা হয়।

উদাহরণ 1: SVG বৃত্তের অবস্থান পরিবর্তন

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <circle id="myCircle" cx="50" cy="50" r="40" fill="blue" />
  <script>
    var circle = document.getElementById('myCircle');
    var x = 50;
    var y = 50;
    setInterval(function() {
      x += 5;
      y += 5;
      circle.setAttribute('cx', x);
      circle.setAttribute('cy', y);
    }, 100);
  </script>
</svg>

ব্যাখ্যা:

• এখানে setInterval() ফাংশনের মাধ্যমে প্রতি 100 মিলিসেকেন্ডে বৃত্তের অবস্থান পরিবর্তন করা হচ্ছে। cx এবং cy অ্যাট্রিবিউটের মান আপডেট হচ্ছে, ফলে বৃত্তটি গতি করে চলবে।

2. JavaScript দিয়ে SVG রঙ পরিবর্তন

JavaScript ব্যবহার করে এসভিজি উপাদানের রঙ পরিবর্তন করা যেতে পারে। এটি খুব সহজ, কারণ আপনি সরাসরি setAttribute() পদ্ধতি ব্যবহার করে রঙের মান পরিবর্তন করতে পারেন।

উদাহরণ 2: SVG বৃত্তের রঙ পরিবর্তন

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <circle id="myCircle" cx="100" cy="100" r="50" fill="blue" />
  <script>
    var circle = document.getElementById('myCircle');
    circle.addEventListener('click', function() {
      var currentColor = circle.getAttribute('fill');
      var newColor = (currentColor === 'blue') ? 'green' : 'blue';
      circle.setAttribute('fill', newColor);
    });
  </script>
</svg>

ব্যাখ্যা:

• এখানে বৃত্তে ক্লিক করলে তার রঙ পরিবর্তিত হয়। addEventListener('click', ...) ব্যবহার করে ক্লিক ইভেন্ট ট্র্যাক করা হচ্ছে এবং fill অ্যাট্রিবিউটের মাধ্যমে রঙ পরিবর্তন করা হচ্ছে।

3. JavaScript দিয়ে SVG উপাদানের আকার পরিবর্তন

JavaScript ব্যবহার করে আপনি এসভিজি উপাদানের আকার পরিবর্তন করতে পারেন। উদাহরণস্বরূপ, বৃত্তের রেডিয়াস (radius) পরিবর্তন করা যেতে পারে।

উদাহরণ 3: SVG বৃত্তের আকার পরিবর্তন

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <circle id="myCircle" cx="100" cy="100" r="50" fill="blue" />
  <script>
    var circle = document.getElementById('myCircle');
    setInterval(function() {
      var currentRadius = parseInt(circle.getAttribute('r'));
      var newRadius = (currentRadius === 50) ? 70 : 50;
      circle.setAttribute('r', newRadius);
    }, 1000);
  </script>
</svg>

ব্যাখ্যা:

• এখানে প্রতি 1 সেকেন্ড পরপর বৃত্তের রেডিয়াস (r) পরিবর্তন করা হচ্ছে। রেডিয়াস ৫০ থেকে ৭০ এবং আবার ৫০ হবে।

4. SVG অ্যানিমেশন ব্যবহার করে কাস্টম টাইমিং

JavaScript দিয়ে আপনি কাস্টম টাইমিং এবং অ্যানিমেশন ট্রানজিশন তৈরি করতে পারেন। requestAnimationFrame() ব্যবহার করে আপনি অ্যানিমেশনকে মসৃণ এবং প্রাকৃতিকভাবে পরিচালনা করতে পারেন।

উদাহরণ 4: SVG বৃত্তের মসৃণ চলাচল

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <circle id="myCircle" cx="50" cy="50" r="30" fill="blue" />
  <script>
    var circle = document.getElementById('myCircle');
    var x = 50;
    var y = 50;

    function animate() {
      x += 2;
      y += 2;
      circle.setAttribute('cx', x);
      circle.setAttribute('cy', y);

      if (x < 200 && y < 200) {
        requestAnimationFrame(animate);
      }
    }
    animate();
  </script>
</svg>

ব্যাখ্যা:

• এখানে requestAnimationFrame() ব্যবহৃত হচ্ছে, যা মসৃণ এবং কর্মক্ষম অ্যানিমেশন তৈরি করে। বৃত্তের অবস্থান স্লো মুভমেন্টে পরিবর্তিত হবে যতক্ষণ না এটি নির্দিষ্ট সীমায় পৌঁছে।

5. SVG অ্যানিমেশন এবং ইন্টারঅ্যাকটিভিটি

JavaScript ব্যবহার করে আপনি এসভিজি উপাদানগুলির উপর ইন্টারঅ্যাকটিভতা যোগ করতে পারেন, যেমন ক্লিক, হোভার, বা ড্র্যাগিং।

উদাহরণ 5: SVG উপাদানে হোভার ইফেক্ট

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <rect id="myRect" x="50" y="50" width="100" height="100" fill="blue" />
  <script>
    var rect = document.getElementById('myRect');
    rect.addEventListener('mouseover', function() {
      rect.setAttribute('fill', 'green');
    });
    rect.addEventListener('mouseout', function() {
      rect.setAttribute('fill', 'blue');
    });
  </script>
</svg>

ব্যাখ্যা:

• এখানে, যখন ইউজার রেকটেঙ্গলে হোভার করবে তখন তার রঙ সবুজ হয়ে যাবে, এবং মাউস আউট করলে আবার নীল হয়ে যাবে।

সারাংশ

JavaScript ব্যবহার করে এসভিজি গ্রাফিক্সে অ্যানিমেশন এবং ইন্টারঅ্যাকটিভিটি যোগ করা সহজ এবং খুব কার্যকরী। আপনি JavaScript দিয়ে এসভিজি উপাদানের অবস্থান, আকার, রঙ পরিবর্তন করতে পারেন এবং ইউজারের ইন্টারঅ্যাকশনের মাধ্যমে ডায়নামিক কার্যাবলী তৈরি করতে পারেন। এর মাধ্যমে ওয়েব পেজে আরও প্রাণবন্ত এবং ইন্টারঅ্যাকটিভ উপাদান তৈরি করা সম্ভব।