Browser preview of svg with colour variables in style sheet using root does not render correctly

Anki Help
1

I am using ubuntu 22.04 so this may be fine on windows/mac. When you preview a card containing an SVG in the browser (not clicking the preview button), if the card contains colour variables in a <style>, they will not be rendered in the preview.

Here is an example svg to illustrate this problem:

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
	<style>
		:root {
			--colour-1: yellow;
		}
	</style>
	<rect width="200" height="100" fill="var(--colour-1)"></rect>
</svg>

When this is pasted inline into a card through the HTML editor, the browser preview always seems to be completely black. Specifically whatever element is coloured with a colour variable is always black:

image
image1922×1082 125 KB

Strangley this isn’t an issue when you press the preview button:

image
image660×563 9.22 KB

This also stops being an issue if you write the svg slightly differently like so:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" style="--colour-1:yellow">
	<rect width="200" height="100" fill="var(--colour-1)"></rect>
</svg>

image
image1922×1082 121 KB

This looks minor here, but for other svgs, it can lead to the user not being able to understand at all what is going on. For example, below is a svg compass which now looks reallly weird:

image
image584×652 66 KB

when it should look like this:

image
image584×652 106 KB

1 Like
2

This has something to do with the field contents being inside a shadow DOM. Using :host instead of :root works.

4 Likes
3

Using :host seems to solve the problem in the browser:

image
image1922×1082 103 KB

However, using it creates new problems in the preview and card review windows. Previously, using :root it was working fine in them:

image
image1111×828 19.1 KB

But now changing to using host in the code below:

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
	<style>
		:host {
			--colour-1: yellow;
		}
	</style>
	<rect width="200" height="100" fill="var(--colour-1)"></rect>
</svg>

means that it no longer works when you review the card:

image
image1111×828 19.1 KB

A similar thing is seen in the preview window.