# SVG move object with type path

**URL:** <https://forum.inductiveautomation.com/t/svg-move-object-with-type-path/70564>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [March 2, 2023, 9:30pm UTC](https://forum.inductiveautomation.com/t/svg-move-object-with-type-path/70564 "2023-03-02T21:30:19Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![gpellicelli](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/gpellicelli/32/53466_2.png) [@gpellicelli](https://forum.inductiveautomation.com/u/gpellicelli)\
**Post date:** [March 2, 2023, 9:30pm UTC](https://forum.inductiveautomation.com/t/svg-move-object-with-type-path/70564/1 "2023-03-02T21:30:19Z")

</div>

Hello,

Am pretty new in SVG editing and am looking to a way to move one of my element into my SVG. Am able to move cercle and rectangle because I have the property for the xy position but with a type Path its look like I can't not make it. Any clue how to make it? Did I need a script python to look the D property and make change on it to change the XY position?

Best regards Gabriel

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/c/acd160667188e9b7da3e8f5e70b4bae8c8364802.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/b/0bad44fae1fe62b3a564fbd95561a9569c3dd930.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/a/9a70e833a43317b72b32ce0825f851c37d245c0a.png)

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [March 2, 2023, 10:12pm UTC](https://forum.inductiveautomation.com/t/svg-move-object-with-type-path/70564/2 "2023-03-02T22:12:14Z")

</div>

Is using inkscape (or similar )to edit the raw SVG not an option?

---

<div class="post-metadata">

**Author:** ![gpellicelli](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/gpellicelli/32/53466_2.png) [@gpellicelli](https://forum.inductiveautomation.com/u/gpellicelli)\
**Post date:** [March 2, 2023, 10:19pm UTC](https://forum.inductiveautomation.com/t/svg-move-object-with-type-path/70564/3 "2023-03-02T22:19:59Z")

</div>

am actually using inkscape and on the editor you can manually position the path element into XY but not dynamic with like an attribute.. That what am looking for..

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/6/a60000e99696c0084db3854d52c78dc585f80f1e.png)

---

<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:** [March 2, 2023, 10:22pm UTC](https://forum.inductiveautomation.com/t/svg-move-object-with-type-path/70564/4 "2023-03-02T22:22:36Z")

</div>

So what exactly are you trying to do? Are you trying to move the circle and change the width of the rectangle? If so, yes, you should just be able to write to the circle's x/y coordinate. The rectangle, because it's a path, will be slightly more involved. I suggest you read up on how the d path works, but really it's just a bunch of coordinates and/or numbers telling the path how to be drawn, from start to finish.

> **[The SVG \`path\` Syntax: An Illustrated Guide | CSS-Tricks](https://css-tricks.com/svg-path-syntax-illustrated-guide/)**
>
> The element in SVG is the ultimate drawing element. It can draw anything! I've heard that under the hood all the other drawing elements ultimately use path

---

<div class="post-metadata">

**Author:** ![gpellicelli](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/gpellicelli/32/53466_2.png) [@gpellicelli](https://forum.inductiveautomation.com/u/gpellicelli)\
**Post date:** [March 2, 2023, 10:25pm UTC](https://forum.inductiveautomation.com/t/svg-move-object-with-type-path/70564/5 "2023-03-02T22:25:51Z")

</div>

I want to move the object on top of the conveyor but this object is not a cercle or rectangle its a path and I dont have the property of moving path into XY its look like a attribute name D. But I think I can make a group with the svg path and use something like translate(0.79377481) but not sure is there a better solution

---

<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:** [March 2, 2023, 10:26pm UTC](https://forum.inductiveautomation.com/t/svg-move-object-with-type-path/70564/6 "2023-03-02T22:26:32Z")

</div>

Can you provide the SVG xml in here?

---

<div class="post-metadata">

**Author:** ![Felipe\_CRM](https://avatars.discourse-cdn.com/v4/letter/f/dfb087/32.png) [@Felipe\_CRM](https://forum.inductiveautomation.com/u/Felipe_CRM)\
**Post date:** [March 2, 2023, 10:27pm UTC](https://forum.inductiveautomation.com/t/svg-move-object-with-type-path/70564/7 "2023-03-02T22:27:20Z")

</div>

Looking up how to do it with a raw SVG led me to [this answer on stackoverflow](https://stackoverflow.com/a/16287313)  
that uses the `transform` attribute on the `<g>` element that contains the path. I'm not sure exactly how that would translate (or if it can translate) to the ignition property tree representation.

---

<div class="post-metadata">

**Author:** ![gpellicelli](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/gpellicelli/32/53466_2.png) [@gpellicelli](https://forum.inductiveautomation.com/u/gpellicelli)\
**Post date:** [March 2, 2023, 10:27pm UTC](https://forum.inductiveautomation.com/t/svg-move-object-with-type-path/70564/8 "2023-03-02T22:27:42Z")

</div>

\<?xml version="1.0" encoding="UTF-8" standalone="no"?\>

---

<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:** [March 2, 2023, 10:28pm UTC](https://forum.inductiveautomation.com/t/svg-move-object-with-type-path/70564/9 "2023-03-02T22:28:40Z")

</div>

you will need to put it into a code block ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/a/eaec1189ef3e35207b01a3c9b638191bc84e2896.png), otherwise the forum will see it as HTML to render

---

<div class="post-metadata">

**Author:** ![gpellicelli](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/gpellicelli/32/53466_2.png) [@gpellicelli](https://forum.inductiveautomation.com/u/gpellicelli)\
**Post date:** [March 2, 2023, 10:31pm UTC](https://forum.inductiveautomation.com/t/svg-move-object-with-type-path/70564/10 "2023-03-02T22:31:33Z")

</div>

```auto
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="179.35768mm"
   height="65.205994mm"
   viewBox="0 0 179.35768 65.205994"
   version="1.1"
   id="svg10274"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs10271" />
  <g
     id="layer1">
    <rect
       style="fill:#006c00;fill-rule:evenodd;stroke:#7e1800;stroke-width:1.32292;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill"
       id="conveyor"
       width="150.35883"
       height="27.67594"
       x="14.499434"
       y="36.868595" />
    <circle
       style="fill:#006c00;fill-rule:evenodd;stroke:#7e1800;stroke-width:1.32292;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill"
       id="rollerleft"
       cx="14.499433"
       cy="50.706562"
       r="13.837973" />
    <circle
       style="fill:#006c00;fill-rule:evenodd;stroke:#7e1800;stroke-width:1.32292;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill"
       id="rollerright"
       cx="164.85826"
       cy="50.706562"
       r="13.837967" />
    <path
       id="item"
       style="fill:#006c00;fill-rule:evenodd;stroke:#7e1800;stroke-width:1.32292;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill"
       d="M 20.811214,0.66145998 H 33.736075 A 7.3021806,7.3021806 45 0 1 41.038256,7.9636406 V 33.01012 H 12.632772 V 8.8399023 a 8.1784423,8.1784423 135 0 1 8.178442,-8.17844232 z" />
  </g>
</svg>

```

---

<div class="post-metadata">

**Author:** ![gpellicelli](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/gpellicelli/32/53466_2.png) [@gpellicelli](https://forum.inductiveautomation.com/u/gpellicelli)\
**Post date:** [March 2, 2023, 10:32pm UTC](https://forum.inductiveautomation.com/t/svg-move-object-with-type-path/70564/11 "2023-03-02T22:32:47Z")

</div>

Yes I think I got it! Its work if I group my path and

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/6/767c8ef90e05d6d41a10dc082d77830b8a9a3890.png)  
use Transform!

---

<div class="post-metadata">

**Author:** ![Felipe\_CRM](https://avatars.discourse-cdn.com/v4/letter/f/dfb087/32.png) [@Felipe\_CRM](https://forum.inductiveautomation.com/u/Felipe_CRM)\
**Post date:** [March 2, 2023, 10:33pm UTC](https://forum.inductiveautomation.com/t/svg-move-object-with-type-path/70564/12 "2023-03-02T22:33:20Z")

</div>

So theoretically if you put that path bit inside its own `<g>` tag you could do something like this:

```auto
...(rest of svg)
<g transform = translate(100,0)>
<path
       id="item"
       style="fill:#006c00;fill-rule:evenodd;stroke:#7e1800;stroke-width:1.32292;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill"
       d="M 20.811214,0.66145998 H 33.736075 A 7.3021806,7.3021806 45 0 1 41.038256,7.9636406 V 33.01012 H 12.632772 V 8.8399023 a 8.1784423,8.1784423 135 0 1 8.178442,-8.17844232 z" />
 </g>
...(rest of svg)

```

and see how that shows up in Ignition. Maybe it would give you an extra property to bind to

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [March 2, 2023, 10:33pm UTC](https://forum.inductiveautomation.com/t/svg-move-object-with-type-path/70564/13 "2023-03-02T22:33:40Z")

</div>

I would create a style property (assuming one doesn't exist) for that specific element and then use the new stylesheet.

---

<div class="post-metadata">

**Author:** ![gpellicelli](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/gpellicelli/32/53466_2.png) [@gpellicelli](https://forum.inductiveautomation.com/u/gpellicelli)\
**Post date:** [March 2, 2023, 10:36pm UTC](https://forum.inductiveautomation.com/t/svg-move-object-with-type-path/70564/14 "2023-03-02T22:36:02Z")

</div>

I did something like that into Inkscape and its look like its work into ignition! Thank you 🙂

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/6/767c8ef90e05d6d41a10dc082d77830b8a9a3890.png)

---

<div class="post-metadata">

**Author:** ![gpellicelli](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/gpellicelli/32/53466_2.png) [@gpellicelli](https://forum.inductiveautomation.com/u/gpellicelli)\
**Post date:** [March 2, 2023, 11:04pm UTC](https://forum.inductiveautomation.com/t/svg-move-object-with-type-path/70564/15 "2023-03-02T23:04:01Z")

</div>

So the solution is to make a Group with the path and use transform(X,Y) and to use effect on the movement of your object you can add a style to your Group and in the style you add transitionDuration with the value you want in Second.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/4/d495d8520f4208d23b6b951294a6499f64b7dd20.png)