Rotate .SVG

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

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

[Jared Wiltshire]

You would use the following -
ng-attr-transform="rotate({{VanneChaude.value || 0}})"

• A point variable's value is accessed with .value
• Use AngularJS string interpolation to dynamically set the attribute
• Prefixing the attribute with ng-attr- ensures that the actual attribute will not be set to an invalid value before AngularJS processes the interpolated expression, there are details about this in the above link
• Adding || 0 ensures (once again) that the attribute is valid in case the point or its value are undefined

[Christophe]

@jared-wiltshire

Thanks, works well!