# Phasor Diagram Angle Change

**URL:** <https://forum.inductiveautomation.com/t/phasor-diagram-angle-change/107636>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [June 20, 2025, 7:51pm UTC](https://forum.inductiveautomation.com/t/phasor-diagram-angle-change/107636 "2025-06-20T19:51:28Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![andrei.veremeenko](https://avatars.discourse-cdn.com/v4/letter/a/a87d85/32.png) [@andrei.veremeenko](https://forum.inductiveautomation.com/u/andrei.veremeenko)\
**Post date:** [June 20, 2025, 7:51pm UTC](https://forum.inductiveautomation.com/t/phasor-diagram-angle-change/107636/1 "2025-06-20T19:51:28Z")

</div>

Hello,

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

```python
<?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.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [June 20, 2025, 11:02pm UTC](https://forum.inductiveautomation.com/t/phasor-diagram-angle-change/107636/2 "2025-06-20T23:02:51Z")

</div>

> [@andrei.veremeenko](#):
>
> I've tried adding Tag directly into the "transform" function, but it did not work.

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

---

<div class="post-metadata">

**Author:** ![David\_Stone](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/david_stone/32/79749_2.png) [@David\_Stone](https://forum.inductiveautomation.com/u/David_Stone)\
**Post date:** [June 21, 2025, 2:42am UTC](https://forum.inductiveautomation.com/t/phasor-diagram-angle-change/107636/3 "2025-06-21T02:42:21Z")

</div>

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} + ")"`

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [June 23, 2025, 1:23am UTC](https://forum.inductiveautomation.com/t/phasor-diagram-angle-change/107636/4 "2025-06-23T01:23:19Z")

</div>

You may find this topic of interest.

> [@How to add animation by HTML/CSS scripts in Perspective?](https://forum.inductiveautomation.com/t/how-to-add-animation-by-html-css-scripts-in-perspective/75523/14):
>
> Okay, so it took me longer than I wanted (my laptop died), but I finally did get around to completing this, and I have to say I'm pretty pleased with the result. This was a fun exercise and I learned something good along the way. I will give you a disclaimer though, other than a rough idea of what an Azimuth Propeller is, I don't know much else. So for instance, I have no idea what the yellow triangle is supposed to indicate and so I didn't add it. I made some assumptions on how I think the re…