Dynamic svg in Scada

[Cyntia_Pola]

Hi,I’m using Inkscape as software to create my svg

I want to add a widget in cumulocity (dynamic svg) .It works pretty good on Chrome but in cumulocity no,it stays static.
I don’t know if I have to add something else.

below is the animation’s code used.

Thank you in advance for your help.

[Cyril_Poder]

Hi,
Can you share the widget configuration?
According to your SVG, there should be a “state” variable defined, and it should equal 1 to start the animation.
To begin with, I’d remove the ng-if attribute to ensure that the animation works and that this “state” variable is the culprit.
Best regards,
Cyril

[Cyntia_Pola]

Thank you @Cyril_Poder for your quick respond.
yes I add a picture below.
But even when I remove the condition it doesn’t work.

[Cyril_Poder]

Could you also remove the data-placeholder attribute on the path element and share the svg file?

[Cyntia_Pola]

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="171.42mm" height="171.09mm" version="1.1" viewBox="0 0 171.42 171.09" xmlns="http://www.w3.org/2000/svg">
 <g stroke-width="0">
  <rect transform="scale(-1)" x="-171" y="-171" width="171" height="171" fill="#4d004d" fill-opacity=".083601"/>
  <path  d="m139.56 117.95c-21.421 25.223-31.946-8.4458-61.454-18.65-29.508-10.204-43.824 52.382-52.196 19.065-8.3721-33.318 35.266-21.289 57.253-48.33 21.988-27.042-25.169-54.379 6.2195-50.165 31.389 4.2128-0.33723 34.786 8.7052 67.448 9.0425 32.662 62.889 5.4095 41.469 30.632z" fill="#c54d4d">
   <animateTransform 
	id="turn"
	attributeName="transform" 
	begin="0s;turn.end" 
	dur="1s" 
	from="0 85 85" 
	to="360 85 85" 
	type="rotate"/>
  </path>
  <path d="m92.344 87.27a8.6255 8.5241 0 0 1-8.3123 8.5184 8.6255 8.5241 0 0 1-8.916-7.8997 8.6255 8.5241 0 0 1 7.6646-9.0922 8.6255 8.5241 0 0 1 9.4728 7.2393" fill="#8e4d4d" stroke-width="0"/>
 </g>
</svg>

[Cyril_Poder]

Ah now I remember Cumulocity doesn’t support SVG animations. You need to use CSS animation instead.
For a rotation, here’s an example:

<style type="text/css">
.rotate-propeller {
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: spin;
	animation-duration: 1000ms;
	
}
@keyframes spin {
	from {
		transform: rotate(0deg);
	} to {
		transform: rotate(360deg);
	}
}
</style>

Then apply the class to the enclosing g element.
You’ll also have to apply a transform to change the center of rotation accordingly.

[Cyril_Poder]

Since having it done right can be a bit tricky, here’s a running example:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="171.42mm" height="171.09mm" version="1.1" viewBox="0 0 171.42 171.09" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
.rotate-propeller {
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: spin;
	animation-duration: 1000ms;
	
}
@keyframes spin {
	from {
		transform: rotate(0deg);
	} to {
		transform: rotate(360deg);
	}
}
</style>
 <g stroke-width="0">
  <rect x="0" y="0" width="171" height="171" fill="#4d004d" fill-opacity=".083601"/>
  <g transform="translate(85.5 85.5)">
  <g class="rotate-propeller">
	  <path transform="translate(-85.5 -85.5)" d="m139.56 117.95c-21.421 25.223-31.946-8.4458-61.454-18.65-29.508-10.204-43.824 52.382-52.196 19.065-8.3721-33.318 35.266-21.289 57.253-48.33 21.988-27.042-25.169-54.379 6.2195-50.165 31.389 4.2128-0.33723 34.786 8.7052 67.448 9.0425 32.662 62.889 5.4095 41.469 30.632z" fill="#c54d4d">
	  </path>
  </g>
  </g>
  <path d="m92.344 87.27a8.6255 8.5241 0 0 1-8.3123 8.5184 8.6255 8.5241 0 0 1-8.916-7.8997 8.6255 8.5241 0 0 1 7.6646-9.0922 8.6255 8.5241 0 0 1 9.4728 7.2393" fill="#8e4d4d" stroke-width="0"/>
 </g>
</svg>

Now you can use ng-class instead of class to apply the animation with a condition.

[Cyntia_Pola]

Thank you so much @Cyril_Poder . Only had to add my conditions and it works good