Draw Circle and Change the Color in Perspective

suram-in · August 25, 2023, 3:34pm

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 -