Phasor Diagram Angle Change

Ignition
1

Hello,

I am trying to create a Phasor Diagram in Perspective Module. So far I added SVG component, here's the code:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="-150 -150 300 300"
     id="phasor-diagram">

  <!-- Background Circle -->
  <circle cx="0" cy="0" r="120" stroke="#ccc" stroke-width="1" fill="none"/>


  <!-- Voltage Phasors -->
  <g id="voltage-phasors">
    <line id="V_A" x1="0" y1="0" x2="120" y2="0"
          stroke="red" stroke-width="2"
          transform="rotate(0)" />
    <line id="V_B" x1="0" y1="0" x2=" 120" y2="0"
          stroke="red" stroke-width="2"
          transform="rotate(120)" />
    <line id="V_C" x1="0" y1="0" x2="120" y2="0"
          stroke="red" stroke-width="2"
          transform="rotate(240)" />
  </g>  

  <!-- Current Phasors -->
  <g id="current-phasors">
    <line id="I_A" x1="0" y1="0" x2="120" y2="0"
          stroke="black" stroke-width="2"
          transform="rotate(-30)" />
    <line id="I_B" x1="0" y1="0" x2="120" y2="0"
          stroke="black" stroke-width="2"
          transform="rotate(90)" />
    <line id="I_C" x1="0" y1="0" x2="120" y2="0"
          stroke="black" stroke-width="2"
          transform="rotate(210)" />
  </g>

  <!-- Labels -->
  <text x="105" y="0" fill="red" font-size="12">V_a</text>
  <text x="-95" y="55" fill="red" font-size="12">V_c</text>
  <text x="-95" y="-65" fill="red" font-size="12">V_b</text>

  <text x="85" y="-15" fill="black" font-size="12">I_a</text>
  <text x="15" y="95" fill="black" font-size="12">I_c</text>
  <text x="-85" y="-15" fill="black" font-size="12">I_b</text>
</svg>

The thing I am struggling right now is binding tags to each phasor so it would rotate based on the Tag Value. I've tried adding Tag directly into the "transform" function, but it did not work.

Thanks in advance.

2

What exactly did you try? Binding the transform to expression: "rotate(" + {tag} + ")" should work, assuming manually editing the value in the rotate function works as expected

3

Normally your best bet is to surround a graphic element/s in a group: <g></g> before you do the transform: rotate(x) on the group, seems to work well for things like rotation centres etc.
Then bind the transform: prop to the tag with the binding and an expression transform: "rotate(" + {value} + ")"