如何使用< input type = number>更改“rect”框的大小和坐标。当使用jQuery / JS [英] How to change size and coordinates of `rect` box with <input type=number> when using jQuery/JS

问题描述

我有一个 rect 框（ svg ）。代码：

I have a rect box (svg). The code:

<div class="basicShapes">
    <svg id="basicShapes" width="230" height="173">
        <g id="basicRect" class="basicRect"  fill="#FFFFFF" stroke="none" transform="translate(20,23)">
            <g id="v-26" class="rotatable" transform="rotate(0,45,27)">
                <g id="v-29" class="scalable" transform="scale(1.8,1.8)">
                    <rect id="v-27" fill="#27AE60" stroke="black" width="50" height="30" rx="2" ry="2">
                </g>
                <text id="v-28" class="changeMe" y="0.8em" fill="white" stroke="black" stroke-width="0" transform="translate(35,20.5) ">text</text>
            </g>
        </g>
   </svg>
</div>

HTML：< input type =number/& / code>

HTML: <input type="number"/>.

我要更改 rect （ svg ）。

<div class="content-box03">
  <p>width:</p>   <!-- width of box -->
  <input type="number" id="mywidth" value="0">
  <p>height:</p>   <!-- height of box -->
  <input type="number" id="myheight" value="0">
  <p>x:</p>   <!-- coordinates Ox -->
  <input type="number" id="my-x" value="0">
  <p>y:</p>    <!-- Coordinates Oy -->
  <input type="number" id="my-y" value="0">
</div>

感谢您的帮助。

推荐答案

将 onchange 属性添加到您的输入元素：

Add onchange attributes to your input elements:

<input type="number" id="mywidth" onchange="changeW()">
<p>height:</p>
<input type="number" id="myheight" onchange="changeH()">
<p>x:</p>
<input type="number" id="my-x" onchange="changeX()">
<p>y:</p>
<input type="number" id="my-y" onchange="changeY()">

写入影响 rect 属性：

var changeW = function() {
  var width = $('#mywidth').val();
  var $v27 = $('#v-27');
  $v27.attr('width', width);
};

var changeH = function() {
  var height = $('#myheight').val();
  var $v27 = $('#v-27');
  $v27.attr('height', height);
};

var changeX = function() {
  var xPos = $('#my-x').val();
  var $v27 = $('#v-27');
  $v27.attr('x', xPos);
};

var changeY = function() {
  var yPos = $('#my-y').val();
  var $v27 = $('#v-27');
  $v27.attr('y', yPos);
};

工作演示 http://jsbin.com/xozome/5/edit

Working Demo http://jsbin.com/xozome/5/edit

或者...

添加可以处理 onclick 事件的按钮 p>

Add a button that can handle an onclick event:

<button type="submit" onclick="process(event)">Submit</button>

然后写一个函数来处理用户的输入：

Then write a function to process the user's input:

var process = function(event) {
  event.preventDefault();

  var width = $('#mywidth').val();
  var height = $('#myheight').val();
  var xPos = $('#my-x').val();
  var yPos = $('#my-y').val();

  var $v27 = $('#v-27');
  $v27.attr('width', width);
  $v27.attr('height', height);
  $v27.attr('x', xPos);
  $v27.attr('y', yPos);

};

工作演示 http://jsbin.com/xozome/4/edit

Working Demo at http://jsbin.com/xozome/4/edit

这篇关于如何使用< input type = number>更改“rect”框的大小和坐标。当使用jQuery / JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！