JSFiddle - React, Tailwind, and code Playground

by IPWright83

HTML

<p>Broken</p>
<svg width="500" height="500">
	<circle id="svg-circle" cx="100" cy="100" r="50" />
	<foreignObject x="0" y="0" width="1000" height="1000" transform="translate(80, 80)">
		<div id="html-circle"></div>
	</foreignObject>
</svg>

<p>Working</p>
<svg width="500" height="500">
	<circle id="svg-circle2" cx="100" cy="100" r="50" />
	<foreignObject x="80" y="80" transform="translate(0, 0)">
		<div id="html-circle2"></div>
	</foreignObject>
</svg>

CSS

svg {
	background: steelblue;
}

#svg-circle, #svg-circle2 {
	fill: red;
}

#html-circle, #html-circle2 {
	background: yellow;
	width: 100px;
	height: 100px;
	border-radius: 50%;
}

JavaScript

document.getElementById("svg-circle").onmousedown = function() { console.log("%c svg-circle clicked", 'background: #f00; color: #fff'); };
document.getElementById("html-circle").onmousedown = function() { console.log("%c html-circle clicked", 'background: #fcc700; color: #000'); };

document.getElementById("svg-circle2").onmousedown = function() { console.log("%c svg-circle clicked", 'background: #f00; color: #fff'); };
document.getElementById("html-circle2").onmousedown = function() { console.log("%c html-circle clicked", 'background: #fcc700; color: #000'); };