Testing intersection observer with svg element

by Pankaj Kargirwar

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Full Viewport SVG Circle in ForeignObject with Intersection Observer</title>
    <style>
        /* Remove margin and padding for body */
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden; /* Prevent scrolling */
        }

        /* Full viewport container */
        .container {
            width: 100vw; /* Full viewport width */
            height: 100vh; /* Full viewport height */
            display: flex;
            justify-content: center; /* Center horizontally */
            align-items: center; /* Center vertically */
        }

        /* Style for the foreignObject */
        .foreign-object {
            width: 100%;
            height: 100%;
        }

        /* Style for the div inside foreignObject */
        .inner-div {
            width: 100vw; /* Full viewport width */
            height: 100vh; /* Full viewport height */
            display: flex;
            justify-content: center; /* Center horizontally */
            align-items: center; /* Center vertically */
            background-color: rgba(255, 255, 255, 0.8); /* Slightly transparent */
            border: 1px solid blue; /* Border for visibility */
        }

        /* Circle styling */
        .circle {
            width: 100px; /* Width of the circle */
            height: 100px; /* Height of the circle */
        }
    </style>
</head>
<body>

<div class="container">
    <svg width="100vw" height="100vh" xmlns="http://www.w3.org/2000/svg">
        <foreignObject x="0" y="0" width="100%" height="100%">
            <div class="inner-div" xmlns="http://www.w3.org/1999/xhtml">
                <svg class="circle" width="100" height="100">
                    <circle cx="50" cy="50" r="40" fill="red" />
                </svg>
            </div>
       ...