Weird Chrome Bug

example.html

<style>
	* {
		margin: 0;
		padding: 0;
	}
	svg.template {
		height: 0em;
		width: 0em;
		display: block;
	}
	svg.moon {
		height: 10em;
		width: 10em;
	}
</style>

<svg class="template" keepAspectRatio="none" viewBox="0 0 100 100" id="orbit">
	<defs>
	<style>
		.solid {
			fill: var(--foreground, rebeccapurple);
		}
		.border {
			fill: none;
			stroke: black;
			stroke-width: 1;
			stroke-dasharray: 5,5;
		}
		.rotate {
			animation: rotate 6s linear infinite;
			transform-origin: center;
		}
		@keyframes rotate {
			from { transform: rotate(0deg); }
			to { transform: rotate(360deg); }
		}
		text {
			fill: white;
			font-family: sans-serif;
		}
		text.center {
			dominant-baseline: central;
			text-anchor: middle;
		}
	</style>
	</defs>

	<ellipse class="border" cx="50" cy="50" rx="40" ry="40" />
	<ellipse class="solid" cx="50" cy="50" rx="25" ry="25" />
	<ellipse class="solid rotate" cx="90" cy="50" rx="10" ry="10" />
	<text x="50" y="50" class="center">Lua ♥</text>
</svg>


<svg class="moon" keepAspectRatio="none" viewBox="0 0 100 100">
	<use xlink:href="#orbit" />
</svg>

<svg class="moon" keepAspectRatio="none" viewBox="0 0 100 100" style="--foreground: #4444aa">
	<use xlink:href="#orbit" />
</svg>