HTML5-এ SVG বৃত্তের ভেতরে ইমেজ কীভাবে প্রদর্শন করবেন?

SVG বৃত্তের ভেতরে ইমেজ প্রদর্শন করার পদ্ধতি

SVG বৃত্তের ভেতরে ইমেজ প্রদর্শন করতে <circle> এলিমেন্ট ব্যবহার করতে হবে এবং ক্লিপিং পাথ সেট করতে হবে। <clipPath> এলিমেন্টটি ক্লিপিং পাথ সংজ্ঞায়িত করতে ব্যবহৃত হয়। SVG-এ ইমেজ সেট করতে <image> এলিমেন্ট ব্যবহার করা হয়।

উদাহরণ

নিচের কোডটি চালিয়ে HTML5-এ SVG বৃত্তের ভেতরে ইমেজ প্রদর্শন করতে শিখুন:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG Image</title>
  </head>
  <body>
    <svg width="500" height="350">
      <defs>
        <clipPath id="myCircle">
          <circle cx="250" cy="145" r="125" fill="#FFFFFF" />
        </clipPath>
      </defs>
      <image width="500" height="350" xlink:href="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" clip-path="url(#myCircle)" />
    </svg>
  </body>
</html>

মূল ধাপসমূহ:

1. <defs> ব্লকে <clipPath> তৈরি করুন унікаল id দিয়ে
2. <clipPath>-এর ভেতরে <circle> দিয়ে ক্লিপিং আকৃতি সংজ্ঞায়িত করুন
3. <image> এলিমেন্টে clip-path="url(#myCircle)" অ্যাট্রিবিউট যোগ করুন
4. xlink:href-এ ইমেজের URL দিন