Newbie SVG question
-
I'm trying to change a text object in my SVG graphic with ng-bind
<div class="ma-designer-root" id="5ecafcd8-a3b4-4ab9-968a-0507e5d53734" style="width: 1366px; height: 768px; position: relative;"> <ma-svg ng-include="'/rest/v2/file-stores/default/DownstairsFloorplan.svg'"> <ma-get-point-value point-xid="DP_5ca78a5a-a87a-451e-a987-4f1bd00459d0" point="point1"></ma-get-point-value> <div ma-selector="#text1011" ng-bind="point1.value"></div> </div>
When I enter this my default text disappears but the point value does not appear.
I've tried using "point1.renderedValue"
and various combinations of values and {{'s with the same result.
If I enter a string into the ng-bind (such as ng-bind="'72.10'") it works fine, so I believe the issue is that I'm not referencing the point value from <ma-get-point-value> correctly.
What am I doing wrong?
-
Hi @N8Hart
2 things I see wrong is that you have not closed the</ma-svg>
,
The<ma-get-point-value>
should be outside the <ma-svg> component.
Here is an example of some working code:<div class="ma-designer-root" id="447bd8dc-dd5d-4955-a00f-38bf41c0864f" style="width: 1366px; height: 768px; position: relative;" ma-scale-to="ma-ui-page-view" ma-center="true"> <ma-svg id="4806442a-b91e-405c-9ae4-04ff54548554" style="position: absolute; left: 0px; top: 0px; width: 1230px; height: 747.781px;" ng-include="'/rest/v2/file-stores/default/Jupiter Bus Drawing_110117 Model (2)-joel.svg'"> <div ma-selector="#Breaker1" ng-style="{transform: 'translateX(' + (breaker1.value ? 0 : 30) + 'px)'}"></div> <div ma-selector="#Breaker2" ng-style="{transform: 'translateX(' + (breaker2.value ? 0 : 30) + 'px)'}"></div> <div ma-selector="#Breaker3" ng-style="{transform: 'translateY(' + (breaker3.value ? 0 : -30) + 'px)'}"></div> <div ma-selector="#Breaker1Power" ng-class="{'power-off': !breaker1.value && (!breaker3.value || !breaker2.value)}"></div> <div ma-selector="#Breaker2Power" ng-class="{'power-off': !breaker2.value && (!breaker3.value || !breaker1.value)}"></div> </ma-svg> <style> .power-off > * { stroke: green; } </style> <ma-get-point-value point-xid="DP_TestData_Breaker1" point="breaker1"></ma-get-point-value> <ma-get-point-value point-xid="DP_TestData_Breaker2" point="breaker2"></ma-get-point-value> <ma-get-point-value point-xid="DP_TestData_Breaker3" point="breaker3"></ma-get-point-value> <ma-get-point-value point-xid="DP_TestData_Breaker4" point="breaker4"></ma-get-point-value> <ma-switch id="c50ce943-b269-4922-964a-afe45e9994ab" style="position: absolute; left: 1230px; top: 90px;" point="breaker1"></ma-switch> <ma-switch id="92e2e353-f4c6-48cd-925b-280915d6ed4e" style="position: absolute; left: 1230px; top: 152px;" point="breaker2"></ma-switch> <ma-switch id="a6068041-9570-4ed9-a511-22e46b130b0b" style="position: absolute; left: 1230px; top: 214px;" point="breaker3"></ma-switch> <ma-switch id="71515480-e5aa-4637-ad79-bf80c1f4e1ce" style="position: absolute; left: 1230px; top: 276px;" point="breaker4"></ma-switch> </div>
-
Thank you Craig!
this worked
div class="ma-designer-root" id="5ecafcd8-a3b4-4ab9-968a-0507e5d53734" style="width: 1366px; height: 768px; position: relative;"> <ma-svg ng-include="'/rest/v2/file-stores/default/DownstairsFloorplan.svg'"><div ma-selector="#text1011" ng-bind="point1.value"></div></ma-svg> <ma-get-point-value point-xid="DP_5ca78a5a-a87a-451e-a987-4f1bd00459d0" point="point1"></ma-get-point-value> </div>
I'm sure that I had the svg closed initially but I messed with it so much that at some point it got cut. I was missing that the ma-selector needed to be within the ma-svg.