How to dynamically create SGV style element

[nevil2]

I am trying to rewrite my TopoEditor from VueJs to Svelte (as I've decided to use Svelte throughout my projects).

In VueJS, I added styling to the SVG, where styling is a computed string based on 20+ variables, as follows:

<svg:style type="text/css">      
     {{ styling }}  
</svg:style>

However, this does not work in Svelte. In Svelte, I can put:

<style>
  .someClass {
     .fill: var(--someColor)
  }
</style>

But:

• --someColor is a CSS variable not a JS variable
• --someColor remains as a variable in the SVG rather than being replaced by its value

Any ideas how I can solve this problem.

[nevil2]

Sorry, answer is obvious:

{@html styling}

were styling starts and finishes with <style> and </style>

[brunnerh]

You could keep the CSS variable and pass the value from JS via the style attribute:

<svg ... style="--someColor: {color}">

(This is the generally recommended approach to parameterizing styles.)

Another approach would be to generate a complete style element string and insert it via @html, e.g.

<script>
	// ...
	const style = `<style>
		.someClass {
			fill: ${color};
		}
	</style>`;
</script>

<svg xmlns="http://www.w3.org/2000/svg">
	{@html style}
	...
</svg>