JSFiddle - React, Tailwind, and code Playground

by Abhijeet Kandalkar

HTML

<body style="margin:0;">
    <div id="idPlayground">
        <svg xmlns="http://www.w3.org/2000/svg" id="group" overflow="visible" x="0" y="0" width="500" height="500">
            <svg id="movegroup" x="100" y="100" width="400" height="400" overflow="visible">
                <rect id="testrect" x="-5" y="-5" width="110" height="110" fill="none" stroke="green" opacity="0.2" />
                <svg id="containerSVG" x="0" y="0">
                    <foreignObject x="0" y="0" width="100" height="100">
                        
                        <body xmlns="http://www.w3.org/1999/xhtml">
                            <div id="canvas" style="width: 100px; height: 100px;background-color: red;"></div>
                        </body>
                    </foreignObject>
                </svg>
            </svg>
        </svg>
    </div>
</body>

JavaScript

var canvas = document.getElementById('canvas');
        if (canvas && canvas.getContext) {
            var ctx = canvas.getContext("2d");
            if (ctx) {
                ctx.fillStyle = "green";
                ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
            }
        }