SVG सर्कल के अंदर इमेज प्रदर्शित करने के लिए, <circle> एलिमेंट का उपयोग करें और क्लिपिंग पथ सेट करें। <clipPath> एलिमेंट का उपयोग क्लिपिंग पथ को परिभाषित करने के लिए किया जाता है। SVG में इमेज <image> एलिमेंट का उपयोग करके सेट की जाती है।
उदाहरण
HTML5 में SVG सर्कल के अंदर इमेज प्रदर्शित करने का तरीका सीखने के लिए निम्न कोड चलाएं:
<!DOCTYPE html> <html> <head> <title>HTML5 SVG इमेज</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>
clip-path="url(#myCircle)" इमेज को परिभाषित सर्कल के आकार में काट देता है।
