An issue with applying a linearGradient on SVG element.

[dominikkrulak]

I have this simple SVG element with a gradient.

<svg viewBox="0 0 10 10">
	<defs>
		<linearGradient id="myGradient" gradientTransform="rotate(90)">
			<stop offset="5%" stop-color="gold" />
			<stop offset="95%" stop-color="red" />
		</linearGradient>
	</defs>
	<circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>

When rendered, the svg element itself gets rendered but the gradient isn't applied.

Gradient isn't applied example

When I edit the element straight from browser, the gradient is applied after render engine updates DOM.

Gradient is applied after changes made to the element using inspection tool example

When I checked the compiled template

 // ...
  attr: {
	"cx": "5",
	"cy": "5",
	"r": "4",
	"fill": "url('#myGradient')"
 },
// ...

the fill key has #myGradient in quotes. Could this be a problem, maybe?

I created the SVG using vanilla JS and tested it with and without the quotes and it worked in my environment.

Any thought?