# Draw Circle and Change the Color in Perspective

**URL:** <https://forum.inductiveautomation.com/t/draw-circle-and-change-the-color-in-perspective/78395>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [August 25, 2023, 3:34pm UTC](https://forum.inductiveautomation.com/t/draw-circle-and-change-the-color-in-perspective/78395 "2023-08-25T15:34:50Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![suram-in](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/suram-in/32/51348_2.png) [@suram-in](https://forum.inductiveautomation.com/u/suram-in)\
**Post date:** [August 25, 2023, 3:34pm UTC](https://forum.inductiveautomation.com/t/draw-circle-and-change-the-color-in-perspective/78395/1 "2023-08-25T15:34:50Z")

</div>

Hi,

I would like to draw a circle and change the stroke and Fill Color based on the Tag Value change in the Perspective. The width and height can be changeable.

Also want to write a text inside the Circle (One Letter only) and that letter should be an option to write from outside. Alignment should be center in both Vertical and Horizontal. The color of the text also should be changeable. I placed another label on the circle but is there any better way?

Here is my code:

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

<svg
   width="21mm"
   height="21mm"
   viewBox="0 0 21 21"
   version="1.1"
   id="svg1"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs1">
    <rect
       x="306.26602"
       y="306.26602"
       width="39.650513"
       height="24.610662"
       id="rect2" />
  </defs>
  <g
     id="layer1"
     transform="translate(-76.191841,-73.297798)">
    <circle
       style="fill:#00ff00;fill-opacity:1;stroke:#ff0000;stroke-width:1;stroke-dasharray:none;stroke-opacity:1"
       id="path1"
       cx="86.691841"
       cy="83.797798"
       r="10" />
    <text
       xml:space="preserve"
       transform="matrix(0.26458333,0,0,0.26458333,3.8751918,0.44174507)"
       id="text2"
       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;white-space:pre;shape-inside:url(#rect2);display:inline;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:1.88976;stroke-dasharray:none;stroke-opacity:1"><tspan
         x="306.26562"
         y="320.86291"
         id="tspan1">M</tspan></text>
  </g>
</svg>

```

And the result I got is -

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/9/791d7d4e2f90d50c1be344c94c827660e2a8110b.png)

I could not be able to change any properties. I tried to change the fill color but doesn't seem it is working. Any help would be appreciated.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [August 25, 2023, 3:58pm UTC](https://forum.inductiveautomation.com/t/draw-circle-and-change-the-color-in-perspective/78395/2 "2023-08-25T15:58:01Z")

</div>

You can make circle out of labels or containers with `border-radius`.

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

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/8/588f3b0025da367169e52d2fcdd5266b4a134682.png)

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

Note that I put it in a flex container, but it works in any container, you'll just have to change some `position` settings.

---

<div class="post-metadata">

**Author:** ![suram-in](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/suram-in/32/51348_2.png) [@suram-in](https://forum.inductiveautomation.com/u/suram-in)\
**Post date:** [August 28, 2023, 1:51pm UTC](https://forum.inductiveautomation.com/t/draw-circle-and-change-the-color-in-perspective/78395/3 "2023-08-28T13:51:56Z")

</div>

Good Alternating solution but I couldn't be able to change the border color.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 28, 2023, 2:09pm UTC](https://forum.inductiveautomation.com/t/draw-circle-and-change-the-color-in-perspective/78395/4 "2023-08-28T14:09:29Z")

</div>

igntion has functionallity to import svgs to embed them to "drawing" components  
that way you can change the text/colors

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

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/e/8ea72cadbd0c2fbf574d6bb4025dca01e98d17b6.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:** [August 28, 2023, 2:50pm UTC](https://forum.inductiveautomation.com/t/draw-circle-and-change-the-color-in-perspective/78395/5 "2023-08-28T14:50:21Z")

</div>

> [@suram-in](#):
>
> couldn't be able to change the border color.

What makes you think you can't change the border color on a label?

---

<div class="post-metadata">

**Author:** ![suram-in](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/suram-in/32/51348_2.png) [@suram-in](https://forum.inductiveautomation.com/u/suram-in)\
**Post date:** [August 28, 2023, 3:14pm UTC](https://forum.inductiveautomation.com/t/draw-circle-and-change-the-color-in-perspective/78395/6 "2023-08-28T15:14:01Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/c/0ca8c0227f0f47697008f631abe11d1a0844ba9b.png)

As you see in the image I tried the different properties to change the color of the circle border.

---

<div class="post-metadata">

**Author:** ![suram-in](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/suram-in/32/51348_2.png) [@suram-in](https://forum.inductiveautomation.com/u/suram-in)\
**Post date:** [August 28, 2023, 3:14pm UTC](https://forum.inductiveautomation.com/t/draw-circle-and-change-the-color-in-perspective/78395/7 "2023-08-28T15:14:25Z")

</div>

Thank You, I will try this.

---

<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:** [August 28, 2023, 3:21pm UTC](https://forum.inductiveautomation.com/t/draw-circle-and-change-the-color-in-perspective/78395/8 "2023-08-28T15:21:47Z")

</div>

You'll need to specify a border width and style to be able to set the color:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/0/00dc243b8c251528fb7083f0f46ecc4ccf3b9f11.png)

---

<div class="post-metadata">

**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\
**Post date:** [August 28, 2023, 3:22pm UTC](https://forum.inductiveautomation.com/t/draw-circle-and-change-the-color-in-perspective/78395/9 "2023-08-28T15:22:47Z")

</div>

You have to set border style to solid

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

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [August 28, 2023, 5:43pm UTC](https://forum.inductiveautomation.com/t/draw-circle-and-change-the-color-in-perspective/78395/10 "2023-08-28T17:43:49Z")

</div>

Well, you're trying to change the color of a border that doesn't exist...