Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

SVG ma-selector change text within SVG


  • I am trying to change the text within an SVG image. I am able to target the text using ma-selector and I can change its style like its fill color. I tried changing the text using ng-value but that did not work. Any ideas?

    <ma-svg ng-include="'/modules/mangoUI/web/dev/img/Bar_Gauge_Acc.svg'" style="width: 150px">
          <div ma-selector="#Axis" style="fill: red;" ng-value="'string'"></div>
    </ma-svg>
    

  • Hi jramirez, welcome to the forum!

    I took the SVG for this answer from,

    https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text

    And modified it to (giving the Grumpy text element an ID),

    <svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
      <style>
        .small { font: italic 13px sans-serif; }
        .heavy { font: bold 30px sans-serif; }
    
        /* Note that the color of the text is set with the    *
         * fill property, the color property is for HTML only */
        .Rrrrr { font: italic 40px serif; fill: red; }
      </style>
    
      <text x="20" y="35" class="small">My</text>
      <text x="40" y="35" class="heavy">cat</text>
      <text x="55" y="55" class="small">is</text>
      <text id="grump" x="65" y="55" class="Rrrrr"></text>
    </svg>
    

    which after placing it at Mango/web/test.svg enabled me to do,

    <ma-svg ng-include="'/test.svg'" style="width: 150px">
          <div ma-selector="#grump" ng-bind="textInput"></div>
    </ma-svg>
    
    <input type="text" ng-model="textInput" ng-init="textInput='Grumpy!'"></input>
    

    Which I believe is what you are seeking.


  • @phildunlap Thanks that works, but what if I just wanted to change it to a constant value without needing to use the input tag??


  • The ng-bind as the property modified by the ma-selector is the critical part. If you assign something to that variable from whatever means it should work, such as

    <ma-svg ng-init="textInput='Grumpy!'" ng-include="'/test.svg'" style="width: 150px">
          <div ma-selector="#grump" ng-bind="textInput"></div>
    </ma-svg>
    

    Edit: If you find yourself running into scope issues (although my examples should work), you may find Jared's tip at the end of this thread useful: https://forum.infiniteautomation.com/topic/3729/svg-ma-selector-and-watchlist/6


  • @phildunlap Great that works! Thank you very much