• C
    Christophe

    Hello

    On a .SVG file I would like to move a valve from a variable value
    I can move it by giving a fixed angle in the code (transform="rotate (30)")
    but I would like it to move from the variable value (VanneChaude).
    how can I do it?
    Thank you

    1.Code Dashboard

    <div class="ma-designer-root" id="a5fdfd5d-b1e0-442e-a6b8-2dd4c37f2abb" style="width: 1366px; height: 768px; position: relative;" ma-center="false">
        
        <!--Point Pour Vitesse Ventilateur-->
        <ma-get-point-value point-xid="DP_a0bf3ffe-04db-4023-bca7-2fdb1841774d" point="Vitesse"></ma-get-point-value>
        <!--Point Pour Vanne Chaude-->
        <ma-get-point-value point-xid="DP_a6e526e9-a650-4c53-b4f2-77ebe2bd2bbd" point="VanneChaude"></ma-get-point-value>
        <!--Point Pour Vanne Froide-->
        <ma-get-point-value point-xid="DP_21141e4b-9980-4811-adc7-254842c27aeb" point="VanneFroide"></ma-get-point-value>
        <!--Affichage Vitesse Ventilateur-->
        <ma-point-value id="4f9ad780-d882-409b-a0d9-7b964446d808" enable-popup="hide" style="position: absolute; left: 95px; top: 18px; width: 100px; height: 60.9549px;" point="Vitesse"></ma-point-value>
        <!--Affichage % Vanne -->
        <ma-point-value id="3adf07d0-213a-47f9-bb61-239d4332f9fb" enable-popup="hide" style="position: absolute; left: 330px; top: 18px; width: 98px; height: 30px;" point="VanneChaude"></ma-point-value>
        <!--Affichage % Froid -->
        <ma-point-value id="20396fa8-55a6-4208-a418-ca30a20d96e9" enable-popup="hide" style="position: absolute; left: 430px; top: 18px; width: 98px; height: 30px;" point="VanneFroide"></ma-point-value>
       
        <!--Image Ventilateur + Rotation en fonction de valeur vitesse  -->
        <ma-svg class="ventilo" id="a3352242-ae43-409c-9d8d-8ff863353339" ng-include="'/modules/mangoUI/web/img/Perso/Ventilateur.svg'" style="position: absolute; width: 230px; height: 230px; left: 95px; top: 50px;">
             <div ma-selector="#Pales" ng-class="{'ma-spin-counterclockwise': false, 'ma-spin-clockwise': true}" ng-style="{'animation-duration': 50 / (Vitesse.value - Vitesse.value % 10) + 0 + 's'}"></div>
        </ma-svg>
    
        <!--Image Batterie Chaude + Rotation Vanne Chaude-->
        <ma-svg id="7a2b3892-a260-4bdb-85b3-66c25034d620" ng-include="'/modules/mangoUI/web/img/Perso/Batteries_Chaude.svg'" style="position: absolute; width: 98px; height: 400px; left: 330px; top: 50px;">
            <div ma-selector="#Vanne" ng-style="{'transform-origin': '134px 560px'}" transform="rotate (30)"></div> 
        </ma-svg>
        
    </div>
    
    1. File .SVG
    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="_x30_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 viewBox="0 0 164 680" style="enable-background:new 0 0 164 680;" xml:space="preserve">
    <style type="text/css">
    	.st0{fill:#3D3D3F;stroke:#1A171B;}
    	.st1{fill:#FAFFFF;stroke:#1A171B;}
    	.st2{fill:#FF0000;stroke:#1A171B;}
    	.st3{display:none;fill:#4FC2EE;stroke:#1A171B;}
    	.st4{fill:#ACACAC;stroke:#000000;}
    	.st5{fill:#ED6D1C;stroke:#000000;stroke-width:0.5;}
    	.st6{fill:#313130;stroke:#000000;stroke-width:0.75;}
    	.st7{fill:#1D1D1B;stroke:#000000;}
    	.st8{fill:#313130;stroke:#000000;stroke-width:0.5;}
    </style>
    <rect id="Corp" x="7.9" y="6.2" class="st0" width="149.4" height="420.8"/>
    <rect id="CorpNeutre" x="17.4" y="15.1" class="st1" width="130.4" height="402.5"/>
    <polygon id="CorpChaud" class="st2" points="17.4,15.1 17.4,417.6 147.8,417.6 "/>
    <rect id="TuyauChaud2" x="26" y="427" class="st2" width="10" height="248"/>
    <rect id="TuyauChaud1" x="126.3" y="427" class="st2" width="10" height="248"/>
    <rect x="36" y="551" class="st3" width="90.3" height="10"/>
    <rect id="CorpVanne2" x="110.7" y="534.3" class="st4" width="41.3" height="77.3"/>
    <rect id="CorpVanne" x="110.7" y="571.7" class="st5" width="41.3" height="40"/>
    <ellipse id="AxeVanne" transform="matrix(0.6737 -0.739 0.739 0.6737 -366.4093 277.8423)" class="st6" cx="131.4" cy="553.8" rx="11.3" ry="11.3"/>
    <rect id="Vanne" x="127.8" y="521.7" class="st7" width="7.2" height="41.6"/>
    <rect id="BP1" x="110.7" y="587.8" class="st8" width="9.4" height="4.8"/>
    <rect id="BP2" x="138" y="597.8" class="st8" width="14" height="13.9"/>
    </svg>
    
    

    Core 3.5.6
    Windows 10
    Chrome 72

    posted in Dashboard Designer & Custom AngularJS Pages read more