Data-placeholder in css animation in (svg) (SCADA)

[Cyntia_Pola]

Hi, I’m using Inkscape as software to create my svg with css animation.

I want to add my place holder as variable in the css method.
I’m learning by doing ,so do not really know if that is possible.

In my css method(rotate-point), I want the animation-duration
to take the value of my data-placeholder but it doesn’t work.
When I simply put a value eg. “1s”, it works pretty good.

Could someone please have a look at my code?

Below (in comments) are the animations’ codes used.
1:without the data-placeholder
2:with

Thank you in advance for your help.

[Cyntia_Pola]

**1:**
  <style
	 **data-placeholder="{{state}}"**
     type="text/css"
     id="style50603">

.rotate-point {
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: point;
	**animation-duration: 1s;**
	transform-origin:right;
	transform-box:fill-box;
	
}
@keyframes point {
	from {
		transform: rotateZ(0deg);
	} to {
		transform: rotateZ(1deg);
	}
}

**2:**

  <style
	 **data-placeholder="{{state}}"**
     type="text/css"
     id="style50603">

.rotate-point {
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: point;
	**animation-duration: {{state s}};**
	transform-origin:right;
	transform-box:fill-box;
	
}
@keyframes point {
	from {
		transform: rotateZ(0deg);
	} to {
		transform: rotateZ(1deg);
	}
}

[Cyntia_Pola]

I finally found a solution.If it can help someone

 <style
	 data-placeholder="{{state}}"
     type="text/css"
     id="style50603">
:root {
			--speed:{{state}}s;
	 }

.rotate-point {
	
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: point;
	animation-duration: var(--speed);
	transform-origin:right;
	transform-box:fill-box;
	
}
@keyframes point {
	from {
		transform: rotateZ(0deg);
	} to {
		transform: rotateZ(1deg);
	}
}