如何通过调平动态改变宽度和高度

Question

I have faced some problems. When I write text on a input field, writing text show another text filed. Another text field width and height not changing dynamically with leveling like below image and demo site

My Demo Site

Default width and height

But I want like this desired output Desired Output Link

For desired output input like these and Demo Site

I have faced another problem height is shown upper of the box. But the height should show left or right position of the box.

Inner hole of the box is another problem that i don't include my box.

And last problem is don't add leveling end arrow of the leveling line. My code is below

For input text

<div class="text_input1">
    <p class="label1"> Text 1 <input class="input_box1" type="text" id="text11" name="text11" value="Enter Text1"></p>
</div>

 <div class="text_input1">
<p class="label1"> Text 2 <input class="input_box1" type="text" id="text22" name="text22" value="Enter Text2"></p>
</div>

<div class="text_input1">
<p class="label1"> Text 3 <input class="input_box1" type="text" id="text33" name="text33" value="Enter Text3"></p>
</div>

For width and height Select

</div>

<h2 class="shape_text_width">WIDTH:</h2>
<div class="iteam_icon2">

<input type="text" id="width" name="width" value="79" onchange="XX()"><p class="mili1">mm</p</input>

</div>
<h2 class="shape_text_width">HEIGHT:</h2>
<div class="iteam_icon2">

    <input type="text" id="height" name="height" value="26" onchange="XX1()"><p class="mili1">mm</p></input>

</div>

Change width and height

$( "#width_label" ).text(79 + " mm");
$("#height_label" ).text( 26 + " mm");

function XX()
{
    var first2 =document.getElementById("width").value;
      var width=first2;
      var width_in_px=width*3.779527559;
      var total_width = Math.round(width_in_px);
      var f_width_in_px = parseInt(total_width);

      var mm_text="mm";

      $('#mySVG1').css("width", f_width_in_px + "px");
      $('#shape1').css("width", f_width_in_px + "px");
      $( "#width_label" ).text( width + " mm");
      $('#width_label').css("width", f_width_in_px + "px");

      var dif=width-300;
      if(width>300)
      {
      $('#height_label').css("margin-right", dif + "px");
      }

} 

 function XX1()
{
    var first22 =document.getElementById("height").value;


      var height=first22;
      var height_in_px=height*3.779527559;
      var total_height = Math.round(height_in_px);
      var f_height_in_px = parseInt(total_height);

      $('#mySVG1').css("height", f_height_in_px + "px");
      $('#shape1').css("height", f_height_in_px + "px");
      $("#height_label" ).text( height + " mm");
      $('#height_label').css("width", f_height_in_px + "px");

}

My OutPut field box width, height and output text code is below

<div class="label_fix" id="height_label" style="border-bottom: 1px solid #000;
   width:100px;
   margin: 0 auto;
   margin-bottom: 5px;
   padding: 2px;">
</div>

<svg  style="width:300px;height:100px" id="mySVG1">
     <rect id="shape1" x="0" y="0" style="width:300px;height:100px" stroke="black" stroke-width="1px" fill="white"/>
     <<text id="text1" x="50%" y="25%" alignment-baseline="central" text-anchor="middle" fill="black"></text> 
     <<text id="text2" x="50%" y="50%" alignment-baseline="central" text-anchor="middle" fill="black"></text> 
     <<text id="text3" x="50%" y="75%" alignment-baseline="central" text-anchor="middle" fill="black"></text> 

</svg>

<div class="label_fix" id="width_label" style="border-top: 1px solid #000;
   width: 300px;
   margin: 0 auto;
   margin-top: 5px;
   padding: 2px;">
</div>

Value Add to my output field

<script>
$( "#text11" )
  .keyup(function(test1) {
    var value = $( this ).val();
    $( "#text1" ).text( value );
    $( "#text_second_1" ).text( value );
    $( "#text_third_1" ).text( value );

  })
</script>
<script>
$( "#text22" )
  .keyup(function(test2) {
    var value = $( this ).val();
    $( "#text2" ).text( value );
    $( "#text_second_2" ).text( value );
    $( "#text_third_2" ).text( value );

  })
</script>
<script>
$( "#text33" )
  .keyup(function(test3) {
    var value = $( this ).val();
    $( "#text3" ).text( value );
    $( "#text_second_3" ).text( value );
    $( "#text_third_3" ).text( value );

  })
</script>

Answer 1

Based on your comment remark above, here is what you are looking after in pure css. Since the one you asked for required the image to be in mm, I tried to keep the correct ratio using px, however, it is up to you to adjust values as you see fit to get the produced results.

All you need is a div and the following style. To fake the 'holes' I applied a background color to the body and used the same color to color the :before and :after pseudo elements.

body {
  background:#ccc;
}
.box {
  box-sizing:border-box;
  background:#fff;
  width:99px;
  border-radius:5px;
  text-align:center;
  padding:7px 0;
  position:relative;
  border:1px solid #000;
  font-size:14px;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  left:5px;
  display:block;
  width:8px;
  height:8px;
  background:#ccc;
  border-radius:50%;
  top:50%;
  margin-top:-5px;
  border:1px solid #000;
}
.box:after {
  left:auto;
  right:5px;
}

Here is a working fiddle. https://jsfiddle.net/s6r6frgx/2/