# \[BUG?\] SVG Component Handles Inadvertently Rotated

**URL:** <https://forum.inductiveautomation.com/t/bug-svg-component-handles-inadvertently-rotated/87218>\
**Category:** Ignition\
**Created:** [March 12, 2024, 8:46pm UTC](https://forum.inductiveautomation.com/t/bug-svg-component-handles-inadvertently-rotated/87218 "2024-03-12T20:46:17Z")\
**Posts on this page:** 2\
**Page:** 1

<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:** [March 12, 2024, 8:46pm UTC](https://forum.inductiveautomation.com/t/bug-svg-component-handles-inadvertently-rotated/87218/1 "2024-03-12T20:46:17Z")

</div>

So I had worked up and example for this [thread](https://forum.inductiveautomation.com/t/animated-svg-dynamically/86984/6). Today I noticed that when you click on svg component, you're greeted with some interesting graphics.

It could be something I've done incorrectly, but I thought I would report it here none the less. Not drastic enough that I feel a formal bug report is needed until someone confirms that I haven't caused this with myself.

![spinner](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/8/c829e0a89f2b86ae3fb235324523307ac6b5136b.gif)

Stylesheet CSS:

```auto
:root {
	--spinner-animation-speed: 1s;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.psc-spinner {
	animation: spin var(--spinner-animation-speed) linear infinite;
}

```

View JSON:

```auto
{
  "custom": {},
  "params": {},
  "props": {
    "defaultSize": {
      "height": 422,
      "width": 573
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "blank"
        },
        "position": {
          "height": 176,
          "width": 155,
          "x": 183,
          "y": 106
        },
        "props": {
          "elements": [
            {
              "elements": [
                {
                  "elements": [
                    {
                      "offset": "0%",
                      "stopColor": "value",
                      "type": "stop"
                    },
                    {
                      "offset": "25%",
                      "stopColor": "#07c",
                      "stopOpacity": "75%",
                      "type": "stop"
                    },
                    {
                      "offset": "50%",
                      "stopColor": "#07c",
                      "stopOpacity": "50%",
                      "type": "stop"
                    },
                    {
                      "offset": "75%",
                      "stopColor": "#07c",
                      "stopOpacity": "25%",
                      "type": "stop"
                    },
                    {
                      "offset": "100%",
                      "stopColor": "#07c",
                      "stopOpacity": "5%",
                      "type": "stop"
                    }
                  ],
                  "id": "fade",
                  "type": "linearGradient",
                  "x1": "1%",
                  "x2": "80%",
                  "y1": "95%",
                  "y2": "15%"
                }
              ],
              "type": "defs"
            },
            {
              "cx": 24,
              "cy": 24,
              "fill": "transparent",
              "r": 22,
              "stroke": {
                "paint": "url(#fade)",
                "width": 4
              },
              "type": "circle"
            }
          ],
          "style": {
            "classes": "spinner"
          },
          "viewBox": "0 0 48 48"
        },
        "type": "ia.shapes.svg"
      }
    ],
    "meta": {
      "name": "root"
    },
    "type": "ia.container.coord"
  }
}

```

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [March 12, 2024, 8:59pm UTC](https://forum.inductiveautomation.com/t/bug-svg-component-handles-inadvertently-rotated/87218/2 "2024-03-12T20:59:59Z")

</div>

Probably unavoidable. You're altering the component via the stylesheet at the same "layer" the designer itself works at.