@thomaseinasto said in Why this kind of <style> can not work?:

!important

Yes!! It finally works!!! Thank you so much!!

I know something like this can create a ball to move along the path.

</ma-svg>
</div>
<style type="text/css" >
.ball {
 width: 15px;
 height: 5px;
 background-color: red;
 border-radius: 50%;

 offset-path: path('M10 80 Q 77.5 10, 145 80 T 280 80');
 offset-distance: 0%;

 animation: red-ball 2s linear alternate infinite;
}
@keyframes red-ball {
from {
   offset-distance: 0%;
}
 to {
   offset-distance: 100%;
}
}
</style>
<path fill="transparent" stroke="#888888" stroke-width="1" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>
</svg>

<div class="ball"></div>

But what if I want to let the ball move along a path in my SVG (the path is complicated can not write it out as a single Line coordinates)?

And this is what the line looks like.!

I want to show the direction of flow of a vector on a line segment. Can I make a small ball move along the line or path in the SVG picture in Mango? Has anyone implemented a similar function like this in ma-SVG?

So I conclude there is something wrong with the style of colour fill. But don't know why.

All I want to achieve is just changing the colour of the element in SVG pic due to the range of data.

But something like this will works.

<div class="ma-designer-root" id="a7f018fd-f4bf-469e-bec7-1282ad4606bc" style="width: 1366px; height: 768px; position: relative;"></div>
<style>
@keyframes flash-warning {
0%, 25% {fill: blue}
30%, 40% {fill: orange}
45%, 55% {fill: blue}
60%, 70% {fill: orange}
75%, 100% {fill: blue}
}
@keyframes flash-critical {
0%, 25% {fill: blue}
30%, 40% {fill: red}
45%, 55% {fill: blue}
60%, 70% {fill: red}
75%, 100% {fill: blue}
}
@keyframes flash-normal {
/10%, 100% {fill: black}/
0%, 25% {fill: blue}
30%, 40% {fill: lime}
45%, 55% {fill: blue}
60%, 70% {fill: lime}
75%, 100% {fill: blue}
}
@keyframes flash-off {
10%, 100% {fill: blue}
}
.flash-warning {
animation: flash-warning 2s linear 1s infinite;
}
.flash-critical {
animation: flash-critical 2s linear 1s infinite;
}
.flash-off {
animation: flash-off 1s linear 0s forwards;
/animation: flash-normal 2s linear 1s infinite;/
}
</style>

<div class="ma-designer-root" id="445b6000b-362e-407f-aa27-05545fea5884" style="width: inherit; height: inherit; position: relative; bottom: inherit; left: inherit;">
<ma-svg ng-include="'/rest/v2/file-stores/default/sss/demo.svg'">
<div ma-selector="#t1" ng-class="{'flash-warning': (v342.value < 0.94) || (v342.value > 1.06), 'flash-critical':(v342.value >= 0.94 && v342.value < 0.95) , 'flash-critical': (v342.value <= 1.06 && v342.value > 1.05), 'flash-off': (v342.value >= 0.95) && (v342.value <= 1.05)}"></div>

</ma-svg>
<ma-get-point-value point-xid="demo1" point="v342"></ma-get-point-value>
</div>

Hi, Thomas and Jared

Thank you so much!! You guys are so quick! However, That is not what I mean. What I mean is that the style statement still does not work with your code. Other kinds of style such as something with animation could work with this condition. But this colour-fill one could not. Quite confusing though. Sorry still new in Mango.

eg. below

<div class="ma-designer-root" id="a7f018fd-f4bf-469e-bec7-1282ad4606bc" style="width: 1366px; height: 768px; position: relative;"></div>
<style>
.grey-fill {
fill: grey;
}
.red-fill {
fill: red;
}
.blue-fill {
fill: blue;
}
.green-fill {
fill: green;
}
</style>

<div class="ma-designer-root" id="445b6000b-362e-407f-aa27-05545fea5884" style="width: inherit; height: inherit; position: relative; bottom: inherit; left: inherit;">
<ma-svg ng-include="'/rest/v2/file-stores/default/sss/demo.svg'">
<div ma-selector="#t1" ng-class="{'grey-fill': (v342.value < 0.94) || (v342.value > 1.06), 'red-fill':(v342.value >= 0.94 &amp;&amp; v342.value < 0.95) , 'blue-fill': (v342.value <= 1.06 &amp;&amp; v342.value > 1.05), 'green-fill': (v342.value >= 0.95) &amp;&amp; (v342.value <= 1.05)}">
</div>
</ma-svg>
<ma-get-point-value point-xid="demo1" point="v342"></ma-get-point-value>
</div>

<div class="ma-designer-root" id="445b6000b-362e-407f-aa27-05545fea5884" style="width: inherit; height: inherit; position: relative; bottom: inherit; left: inherit;">
  <ma-svg ng-include="'/rest/v2/file-stores/default/sss/demo.svg'">
    <div ma-selector="#t1" ng-class="{'grey-fill': 1, 'red-fill': 0, 'blue-fill': 0, 'green-fill': 0}"></div>
</ma-svg>
</div>

<style>
.grey-fill {
  fill: grey;
}
.red-fill {
  fill: red;
}
.blue-fill {
  fill: blue;
}
.green-fill {
  fill: green;
}
</style>