Dynamic svg in Scada

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.

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

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.

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

<?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>

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.

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.

2 Likes

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