Draw Circle and Change the Color in Perspective

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:

<?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 -

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.

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

image

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

1 Like

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

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

image

1 Like

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

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

Thank You, I will try this.

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

2 Likes

You have to set border style to solid

image

3 Likes

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