Changing rec location and width programatically

by

I’ve the below code, which is drawing a rec in a svg element:

.container
{
  display: flex;
  align-items: center;
  height: 1.3em;
}
  <div class="container">
    <label for="from">From:</label>
    <input type="number" name="from">
    <label for="to">To:</label>
    <input type="number" name="to">
    <svg margin="0" width="200" height="1.3em">
        <rect x="10" y="0" width="30" height="1.3em" stroke="black" fill="green" />
    </svg>

I want to be able "prpgramatically" to:

  1. Shift the location of the rec by changing the value of the from field
  2. Chang the width of the rec by changing the value of the to field

104 thoughts on “Changing rec location and width programatically”

Leave a Comment