如何使用 HTML 滑块操作 SVG 线条答案

【问题标题】：How to manipulate an SVG line using an HTML slider如何使用 HTML 滑块操作 SVG 线条
【发布时间】：2021-02-11 03:40:34
【问题描述】：

我有一个使用 HTML 滑块移动 SVG 线条的示例。现在它通过 HTML 滑块上下移动水平线。接下来我希望它上下移动以及向内（从中心）缩放。它需要在向下移动时缩小，在向上移动时放大。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>Move The Line</title>
    <style>
      .vert1Slider {
        width: 150px;
        height: 20px;
      }
      #vert1Display {
        font-family: arial;
        font-size: small;
        margin-top: -20px;
        text-align: left;
        padding-left: 10px;
      }
      .slider {
        -webkit-appearance: none;
        width: 100%;
        height: 20px;
        border-radius: 10px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.5;
        -webkit-transition: 0.2s;
        transition: opacity 0.2s;
      }
      .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #4caf50;
        cursor: pointer;
      }
      .slider::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #4caf50;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <!-- SVG Vertical Position Line Slider -->
    <svg class="moveTheLine" id="svg2" width="150" height="80">
      <rect width="300" height="300" fill="#eee"></rect>
      <line
        id="testLine"
        x1="39"
        y1="28"
        x2="111"
        y2="28"
        fill="none"
        id="svg_line"
        stroke="#000000"
        stroke-linecap="round"
        stroke-width="5"
      />
    </svg>
    <!-- END - SVG Vertical Position Line Slider -->

    <!-- HTML Vertical Position Line Slider -->
    <div class="vert1Slider">
      <input
        id="vert1Range"
        type="range"
        min=".5"
        max="1.5"
        value="1"
        step=".05"
        class="slider"
      />
      <p id="vert1Display">Vertical Position <span id="vertScalar"></span></p>
    </div>
    <!-- END - HTML Vertical Position Line Slider -->

    <!-- JS Vertical Position Line Slider -->
    <script>
      var sliderVert1 = document.getElementById("vert1Range"); //getter
      var outputVert1 = document.getElementById("vertScalar"); //getter
      var origVert1 = document.getElementById("testLine").getAttribute("y1"); //getter
      var origVert2 = document.getElementById("testLine").getAttribute("y2"); //getter
      console.log(origVert1, origVert2);
      outputVert1.innerHTML = sliderVert1.value;

      sliderVert1.oninput = function () {
        var newPathX1 = $(testLine).attr("x1"); //getter
        var newPathY1 = $(testLine).attr("y1"); //getter
        var newPathX2 = $(testLine).attr("x2"); //getter
        var newPathY2 = $(testLine).attr("y2"); //getter
        newX1 = newPathX1 * 1;
        newY1 = origVert1 * vert1Range.value;
        newX2 = newPathX2 * 1;
        newY2 = origVert2 * vert1Range.value;
        console.log(newX1, newY1);
        console.log(newX2, newY2);
        console.log(vert1Range.value);
        $(testLine).attr("x1", newX1); //setter
        $(testLine).attr("y1", newY1); //setter
        $(testLine).attr("x2", newX2); //setter
        $(testLine).attr("y2", newY1); //setter
        outputVert1.innerHTML = this.value;
      };
    </script>
    <!-- END - JS Vertical Position Line Slider -->
  </body>
</html>

这是我的示例代码：

https://jsfiddle.net/harbin_bill/0zw945m8/17/

【问题讨论】：

标签： javascript html jquery css svg

【解决方案1】：

我用直线方程解决了这个问题。

在上限处找到点坐标并将它们指定为 x1,y1
找到下限的点坐标并将它们指定为 x2,y2
使用这些坐标求解点斜率和斜率截距
求解 x 的 y=mx+b 方程
将等式作为 newX1 和 newX2 插入到我的代码中

sliderVert1.oninput = function () {
    var newPathX1 = $(testLine).attr("x1"); //getter
    var newPathY1 = $(testLine).attr("y1"); //getter
    var newPathX2 = $(testLine).attr("x2"); //getter
    var newPathY2 = $(testLine).attr("y2"); //getter
    newY1 = origVert1 * vert1Range.value;
    newX1 = (5 * newY1 + 133) / 7;
    newY2 = origVert2 * vert1Range.value;
    newX2 = -((5 * newY2 - 917) / 7);
    console.log(Math.round(newX1), Math.round(newY1));
    console.log(Math.round(newX2), Math.round(newY2));
    console.log(vert1Range.value);
    $(testLine).attr("x1", newX1); //setter
    $(testLine).attr("y1", newY1); //setter
    $(testLine).attr("x2", newX2); //setter
    $(testLine).attr("y2", newY1); //setter
    outputVert1.innerHTML = this.value;
  };

这是我的示例代码：

https://jsfiddle.net/harbin_bill/0kduvj8z/1/

【讨论】：