• Z
    Zhilin Chen

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

    !important

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

    posted in User help read more
  • Z
    Zhilin Chen

    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.!
    0_1576303107054_20191214165753.png

    posted in User help read more
  • Z
    Zhilin Chen

    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?

    posted in User help read more
  • Z
    Zhilin Chen

    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.

    posted in User help read more
  • Z
    Zhilin Chen

    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>

    posted in User help read more
  • Z
    Zhilin Chen

    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>

    posted in User help read more
  • Z
    Zhilin Chen

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

    posted in User help read more