Question

我有以下代码，它在 rec 元素中绘制一个 svg：

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

我希望能够“在语法上”：

通过更改 rec 字段的值来移动 from 的位置
通过更改 rec 字段的值来更改 to 的宽度

Answer 1

const svgRect = document.querySelector('svg rect')


function xStart(XS){
  svgRect.setAttribute('x',XS)
}
function rWidth(RW){
  svgRect.setAttribute('width',RW)
}

.container
{
  display: flex;
  align-items: center;
  height: 1.3em;
}

<div class="container">
    <label for="from">From:</label>
    <input onchange="xStart(this.value)" type="number" name="from">
    <label for="to">To:</label>
    <input onchange="rWidth(this.value)" 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>

为了改变宽度，您甚至可以为鼠标位置和情况添加侦听器，示例代码如下：

        let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        svg.setAttribute("class", "octicon octicon-star");
      //  svg.setAttribute("viewBox", "0 0 14 16");
        svg.setAttribute("version", "1.1");
        svg.setAttribute("width", 240);
        svg.setAttribute("height", 160);
        svg.setAttribute("aria-hidden", "true");
        let barThickness = 20

        let orders = [100, 152];
        //orders.forEach((element, index, array) => console.log('a[' + index + '] = ' + element) )
        orders.forEach(function(element, index, array) {
            console.log('a[' + index + '] = ' + element)
            let r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
            r.setAttribute("x", 0);
            r.setAttribute("y",(barThickness+10)*index+0);
            r.setAttribute("width", element);
            r.setAttribute("height", barThickness);
            r.setAttribute("fill","black");

            let isDrawing = false;
            let x = element
            let mousePosition = 0

            r.addEventListener('mouseenter', e => {
                e.path[0].setAttribute("fill","red")
            });

            r.addEventListener('mouseleave', e => {
                e.path[0].setAttribute("fill","black")
                if (isDrawing === true) {
                    isDrawing = false;
                }
            });


            r.addEventListener('mousedown', e => {
                isDrawing = true;
            });

            r.addEventListener('mousemove', e => {
                if (isDrawing === true) {
                    console.log(e.offsetX)
                    if(e.offsetX>mousePosition) {
                        x++
                    } else if(e.offsetX < mousePosition){
                        x--
                    }
                    mousePosition = e.offsetX
                    r.setAttribute("width", x)
                }
            });

            r.addEventListener('mouseup', e => {
                if (isDrawing === true) {
                    isDrawing = false;
                }
            });

            svg.appendChild(r);
            document.body.appendChild(svg) 
        
        }  )

Answer 2

   var startX = 100;
        var startY = 100;

        function init() {
            Snap("#rect").drag(dragMove, dragStart, dragEnd);
        }



        function dragStart(x, y, evt) {
            // figure out where the circle currently is
            startX = parseInt(Snap("#rect").attr("x"), 10);
            startY = parseInt(Snap("#rect").attr("y"), 0);
        }

        function dragMove(dx, dy, x, y, evt) {
            Snap("#rect").attr({
                x: (startX + dx),
                y: (startY + dy)
            });
        }

        function dragEnd(evt) {
            // no action required
        }

   .container {
            display: flex;
            align-items: center;
            height: 1.3em;
            position:relative;
        }
        
        svg {
            position: absolute;
            top: 0;
            left:420px;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>

<body onload="init()">

    <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="400" height="400">
      <rect draggable="true" id='rect' x="10" y="0" width="30" height="1.3em" stroke="black" fill="green" />
  </svg>
    </div>
</body>

以编程方式更改记录位置和宽度

2 个答案: