如何在SVG文件中构建滑块功能？

Question

我有一个带有彩色条和手柄的滑块的SVG图像（请参见下面的代码段）。我想使此SVG图像交互式，以便查看者可以将手柄移至沿滑块的11个不同位置。一切都需要在＆lt; svg＆gt;/svg＆gt;标签中；我不能使用外部HTML或脚本。 SVG文件将被添加到＆lt; object＆gt;标签中的HTML网页中，以保留交互性。

SVG文件中包含在11个Invisible ＆lt; rect＆gt;元素，以充当每个11个滑块位置中的hitboxes，以及transform> transform =“ translate（0 0）”在手柄组上标记。单击其中一个Hitbox，应通过更新transform参数的X-Value将其移动到相应位置；将鼠标按钮固定下来，即使鼠标垂直移出hitboxes的范围，鼠标也应将手柄移动到对应于鼠标X坐标的位置。

我知道您可以将JavaScript放入SVG文件中，但是我对JS并不熟悉，所以我不知道该如何处理。 JS是最好的方法吗？如果是这样，我该如何使用它来获得所需的功能？

<svg id="Slider-Image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="84" viewBox="0 0 240 84">
    <defs>
        <style>
            .hitbox {
                cursor: pointer;
                opacity: 0;
            }
        </style>
    </defs>
    <g id="Slider-BG">
        <rect id="BG-Fill" width="240" height="84" fill="#999"/>
        <polygon id="Bevel-Top" points="9 29 14 35 226 35 231 29 9 29" fill="#887"/>
        <polygon id="Bevel-Right" points="226 35 226 63 231 69 231 29 226 35" fill="#aba"/>
        <polygon id="Bevel-Left" points="9 29 9 69 14 63 14 35 9 29" fill="#baa"/>
        <polygon id="Bevel-Bottom" points="9 69 231 69 226 63 14 63 9 69" fill="#cdd"/>
    </g>
    <g id="Slider-Bar">
        <rect id="Slider-Bar-BG" x="14" y="35" width="212" height="28"/>
        <rect id="Slider-Bar-Red" x="15" y="38" width="18" height="19" fill="#f22"/>
        <rect id="Slider-Bar-Yellow" x="35" y="38" width="18" height="19" fill="#ec0"/>
        <rect id="Slider-Bar-Green" x="53" y="38" width="171" height="19" fill="#9e1"/>
        <line id="Slider-Bar-Divider-1" x1="53.5" y1="38" x2="53.5" y2="57" stroke="#000" opacity="0.5"/>
        <line id="Slider-Bar-Divider-2" x1="72.5" y1="38" x2="72.5" y2="57" stroke="#000" opacity="0.5"/>
        <line id="Slider-Bar-Divider-3" x1="91.5" y1="38" x2="91.5" y2="57" stroke="#000" opacity="0.5"/>
        <line id="Slider-Bar-Divider-4" x1="110.5" y1="38" x2="110.5" y2="57" stroke="#000" opacity="0.5"/>
        <line id="Slider-Bar-Divider-5" x1="129.5" y1="38" x2="129.5" y2="57" stroke="#000" opacity="0.5"/>
        <line id="Slider-Bar-Divider-6" x1="148.5" y1="38" x2="148.5" y2="57" stroke="#000" opacity="0.5"/>
        <line id="Slider-Bar-Divider-7" x1="167.5" y1="38" x2="167.5" y2="57" stroke="#000" opacity="0.5"/>
        <line id="Slider-Bar-Divider-8" x1="186.5" y1="38" x2="186.5" y2="57" stroke="#000" opacity="0.5"/>
        <line id="Slider-Bar-Divider-9" x1="205.5" y1="38" x2="205.5" y2="57" stroke="#000" opacity="0.5"/>
    </g>
    <g id="Slider-Handle" transform="translate(0 0)">
        <polygon id="Handle-Body" points="31 66 57 66 57 46 46 35 42 35 31 46 31 66" fill="#aaa"/>
        <rect id="Handle-Center" x="42" y="35" width="4" height="31" fill="#ddd"/>
        <rect id="Handle-Pointer" x="43" y="34" width="2" height="16" fill="#111"/>
    </g>
    <g id="Slider-Positions">
        <rect id="Slider-Position-Minus-20" class="hitbox" x="15" y="29" width="19" height="40"/>
        <rect id="Slider-Position-Plus-0" class="hitbox" x="34" y="29" width="19" height="40"/>
        <rect id="Slider-Position-Plus-19" class="hitbox" x="53" y="29" width="19" height="40"/>
        <rect id="Slider-Position-Plus-38" class="hitbox" x="72" y="29" width="19" height="40"/>
        <rect id="Slider-Position-Plus-57" class="hitbox" x="91" y="29" width="19" height="40"/>
        <rect id="Slider-Position-Plus-76" class="hitbox" x="110" y="29" width="19" height="40"/>
        <rect id="Slider-Position-Plus-95" class="hitbox" x="129" y="29" width="19" height="40"/>
        <rect id="Slider-Position-Plus-114" class="hitbox" x="148" y="29" width="19" height="40"/>
        <rect id="Slider-Position-Plus-133" class="hitbox" x="167" y="29" width="19" height="40"/>
        <rect id="Slider-Position-Plus-152" class="hitbox" x="186" y="29" width="19" height="40"/>
        <rect id="Slider-Position-Plus-171" class="hitbox" x="205" y="29" width="19" height="40"/>
    </g>
</svg>

Answer 1

这是这样的。当代码是独立文档时，该代码看起来应该有所不同，但是您明白了。

console.log(Math.ceil((200 - 53) / 19) * 19);

<svg id="Slider-Image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="84" viewBox="0 0 240 84">
  <defs>
    <style>
      #Slider-Hitbox {
        cursor: pointer;
        opacity: 0;
      }
      .divider {
        stroke: #000;
        opacity: 0.5;
      }
    </style>
  </defs>
  <g id="Slider-BG">
    <rect id="BG-Fill" width="240" height="84" fill="#999"/>
    <polygon id="Bevel-Top" points="9 29 14 35 226 35 231 29 9 29" fill="#887"/>
    <polygon id="Bevel-Right" points="226 35 226 63 231 69 231 29 226 35" fill="#aba"/>
    <polygon id="Bevel-Left" points="9 29 9 69 14 63 14 35 9 29" fill="#baa"/>
    <polygon id="Bevel-Bottom" points="9 69 231 69 226 63 14 63 9 69" fill="#cdd"/>
  </g>
  <g id="Slider-Bar">
    <rect id="Slider-Bar-BG" x="14" y="35" width="212" height="28"/>
    <rect id="Slider-Bar-Red" x="15" y="38" width="18" height="19" fill="#f22"/>
    <rect id="Slider-Bar-Yellow" x="35" y="38" width="18" height="19" fill="#ec0"/>
    <rect id="Slider-Bar-Green" x="53" y="38" width="171" height="19" fill="#9e1"/>
    <line id="Slider-Bar-Divider-1" class="divider" x1="53.5" y1="38" x2="53.5" y2="57"/>
    <line id="Slider-Bar-Divider-2" class="divider" x1="72.5" y1="38" x2="72.5" y2="57"/>
    <line id="Slider-Bar-Divider-3" class="divider" x1="91.5" y1="38" x2="91.5" y2="57"/>
    <line id="Slider-Bar-Divider-4" class="divider" x1="110.5" y1="38" x2="110.5" y2="57"/>
    <line id="Slider-Bar-Divider-5" class="divider" x1="129.5" y1="38" x2="129.5" y2="57"/>
    <line id="Slider-Bar-Divider-6" class="divider" x1="148.5" y1="38" x2="148.5" y2="57"/>
    <line id="Slider-Bar-Divider-7" class="divider" x1="167.5" y1="38" x2="167.5" y2="57"/>
    <line id="Slider-Bar-Divider-8" class="divider" x1="186.5" y1="38" x2="186.5" y2="57"/>
    <line id="Slider-Bar-Divider-9" class="divider" x1="205.5" y1="38" x2="205.5" y2="57"/>
  </g>
  <g id="Slider-Handle" transform="translate(0 0)">
    <polygon id="Handle-Body" points="31 66 57 66 57 46 46 35 42 35 31 46 31 66" fill="#aaa"/>
    <rect id="Handle-Center" x="42" y="35" width="4" height="31" fill="#ddd"/>
    <rect id="Handle-Pointer" x="43" y="34" width="2" height="16" fill="#111"/>
  </g>
  <rect id="Slider-Hitbox" x="13" y="34" width="214" height="30"/>
  <script>//<![CDATA[
    var down = false;
    var translateX = 0;
    const toSVGPoint = (svg, x, y) => {
      let p = new DOMPoint(x, y);
      return p.matrixTransform(svg.getScreenCTM().inverse());
    };
    document.getElementById("Slider-Hitbox").addEventListener("mousedown", e => {
      down = true;
      let p = toSVGPoint(document.getElementById("Slider-Image"), e.clientX, e.clientY);
      let translateX = Math.ceil((p.x-53) / 19) * 19;
      if(translateX < 0) translateX = -20;
      if(translateX > 171) translateX = 171;
      document.getElementById("Slider-Handle").setAttribute("transform", `translate(${translateX} 0)`);
    });
    document.getElementById("Slider-Image").addEventListener("mousemove", e => {
      if(down) {
        let p = toSVGPoint(document.getElementById("Slider-Image"), e.clientX, e.clientY);
        let translateX = Math.ceil((p.x-53) / 19) * 19;
        if(translateX < 0) translateX = -20;
        if(translateX > 171) translateX = 171;
        document.getElementById("Slider-Handle").setAttribute("transform", `translate(${translateX} 0)`);
      }
    });
    document.getElementById("Slider-Image").addEventListener("mouseup", e => {
      down = false;
    });
  //]]></script>
</svg>

这是整个SVG，在对象元素中运行JavaScript：

<object width="240" data="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyBpZD0iU2xpZGVyLUltYWdlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQwIiBoZWlnaHQ9Ijg0IiB2aWV3Qm94PSIwIDAgMjQwIDg0Ij4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgI1NsaWRlci1IaXRib3ggewogICAgICAgIGN1cnNvcjogcG9pbnRlcjsKICAgICAgICBvcGFjaXR5OiAwOwogICAgICB9CiAgICAgIC5kaXZpZGVyIHsKICAgICAgICBzdHJva2U6ICMwMDA7CiAgICAgICAgb3BhY2l0eTogMC41OwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8ZyBpZD0iU2xpZGVyLUJHIj4KICAgIDxyZWN0IGlkPSJCRy1GaWxsIiB3aWR0aD0iMjQwIiBoZWlnaHQ9Ijg0IiBmaWxsPSIjOTk5Ii8+CiAgICA8cG9seWdvbiBpZD0iQmV2ZWwtVG9wIiBwb2ludHM9IjkgMjkgMTQgMzUgMjI2IDM1IDIzMSAyOSA5IDI5IiBmaWxsPSIjODg3Ii8+CiAgICA8cG9seWdvbiBpZD0iQmV2ZWwtUmlnaHQiIHBvaW50cz0iMjI2IDM1IDIyNiA2MyAyMzEgNjkgMjMxIDI5IDIyNiAzNSIgZmlsbD0iI2FiYSIvPgogICAgPHBvbHlnb24gaWQ9IkJldmVsLUxlZnQiIHBvaW50cz0iOSAyOSA5IDY5IDE0IDYzIDE0IDM1IDkgMjkiIGZpbGw9IiNiYWEiLz4KICAgIDxwb2x5Z29uIGlkPSJCZXZlbC1Cb3R0b20iIHBvaW50cz0iOSA2OSAyMzEgNjkgMjI2IDYzIDE0IDYzIDkgNjkiIGZpbGw9IiNjZGQiLz4KICA8L2c+CiAgPGcgaWQ9IlNsaWRlci1CYXIiPgogICAgPHJlY3QgaWQ9IlNsaWRlci1CYXItQkciIHg9IjE0IiB5PSIzNSIgd2lkdGg9IjIxMiIgaGVpZ2h0PSIyOCIvPgogICAgPHJlY3QgaWQ9IlNsaWRlci1CYXItUmVkIiB4PSIxNSIgeT0iMzgiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOSIgZmlsbD0iI2YyMiIvPgogICAgPHJlY3QgaWQ9IlNsaWRlci1CYXItWWVsbG93IiB4PSIzNSIgeT0iMzgiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOSIgZmlsbD0iI2VjMCIvPgogICAgPHJlY3QgaWQ9IlNsaWRlci1CYXItR3JlZW4iIHg9IjUzIiB5PSIzOCIgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxOSIgZmlsbD0iIzllMSIvPgogICAgPGxpbmUgaWQ9IlNsaWRlci1CYXItRGl2aWRlci0xIiBjbGFzcz0iZGl2aWRlciIgeDE9IjUzLjUiIHkxPSIzOCIgeDI9IjUzLjUiIHkyPSI1NyIvPgogICAgPGxpbmUgaWQ9IlNsaWRlci1CYXItRGl2aWRlci0yIiBjbGFzcz0iZGl2aWRlciIgeDE9IjcyLjUiIHkxPSIzOCIgeDI9IjcyLjUiIHkyPSI1NyIvPgogICAgPGxpbmUgaWQ9IlNsaWRlci1CYXItRGl2aWRlci0zIiBjbGFzcz0iZGl2aWRlciIgeDE9IjkxLjUiIHkxPSIzOCIgeDI9IjkxLjUiIHkyPSI1NyIvPgogICAgPGxpbmUgaWQ9IlNsaWRlci1CYXItRGl2aWRlci00IiBjbGFzcz0iZGl2aWRlciIgeDE9IjExMC41IiB5MT0iMzgiIHgyPSIxMTAuNSIgeTI9IjU3Ii8+CiAgICA8bGluZSBpZD0iU2xpZGVyLUJhci1EaXZpZGVyLTUiIGNsYXNzPSJkaXZpZGVyIiB4MT0iMTI5LjUiIHkxPSIzOCIgeDI9IjEyOS41IiB5Mj0iNTciLz4KICAgIDxsaW5lIGlkPSJTbGlkZXItQmFyLURpdmlkZXItNiIgY2xhc3M9ImRpdmlkZXIiIHgxPSIxNDguNSIgeTE9IjM4IiB4Mj0iMTQ4LjUiIHkyPSI1NyIvPgogICAgPGxpbmUgaWQ9IlNsaWRlci1CYXItRGl2aWRlci03IiBjbGFzcz0iZGl2aWRlciIgeDE9IjE2Ny41IiB5MT0iMzgiIHgyPSIxNjcuNSIgeTI9IjU3Ii8+CiAgICA8bGluZSBpZD0iU2xpZGVyLUJhci1EaXZpZGVyLTgiIGNsYXNzPSJkaXZpZGVyIiB4MT0iMTg2LjUiIHkxPSIzOCIgeDI9IjE4Ni41IiB5Mj0iNTciLz4KICAgIDxsaW5lIGlkPSJTbGlkZXItQmFyLURpdmlkZXItOSIgY2xhc3M9ImRpdmlkZXIiIHgxPSIyMDUuNSIgeTE9IjM4IiB4Mj0iMjA1LjUiIHkyPSI1NyIvPgogIDwvZz4KICA8ZyBpZD0iU2xpZGVyLUhhbmRsZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwKSI+CiAgICA8cG9seWdvbiBpZD0iSGFuZGxlLUJvZHkiIHBvaW50cz0iMzEgNjYgNTcgNjYgNTcgNDYgNDYgMzUgNDIgMzUgMzEgNDYgMzEgNjYiIGZpbGw9IiNhYWEiLz4KICAgIDxyZWN0IGlkPSJIYW5kbGUtQ2VudGVyIiB4PSI0MiIgeT0iMzUiIHdpZHRoPSI0IiBoZWlnaHQ9IjMxIiBmaWxsPSIjZGRkIi8+CiAgICA8cmVjdCBpZD0iSGFuZGxlLVBvaW50ZXIiIHg9IjQzIiB5PSIzNCIgd2lkdGg9IjIiIGhlaWdodD0iMTYiIGZpbGw9IiMxMTEiLz4KICA8L2c+CiAgPHJlY3QgaWQ9IlNsaWRlci1IaXRib3giIHg9IjEzIiB5PSIzNCIgd2lkdGg9IjIxNCIgaGVpZ2h0PSIzMCIvPgogIDxzY3JpcHQ+Ly88IVtDREFUQVsKICAgIHZhciBkb3duID0gZmFsc2U7CiAgICB2YXIgdHJhbnNsYXRlWCA9IDA7CiAgICBjb25zdCB0b1NWR1BvaW50ID0gKHN2ZywgeCwgeSkgPT4gewogICAgICBsZXQgcCA9IG5ldyBET01Qb2ludCh4LCB5KTsKICAgICAgcmV0dXJuIHAubWF0cml4VHJhbnNmb3JtKHN2Zy5nZXRTY3JlZW5DVE0oKS5pbnZlcnNlKCkpOwogICAgfTsKICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJTbGlkZXItSGl0Ym94IikuYWRkRXZlbnRMaXN0ZW5lcigibW91c2Vkb3duIiwgZSA9PiB7CiAgICAgIGRvd24gPSB0cnVlOwogICAgICBsZXQgcCA9IHRvU1ZHUG9pbnQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoIlNsaWRlci1JbWFnZSIpLCBlLmNsaWVudFgsIGUuY2xpZW50WSk7CiAgICAgIGxldCB0cmFuc2xhdGVYID0gTWF0aC5jZWlsKChwLngtNTMpIC8gMTkpICogMTk7CiAgICAgIGlmKHRyYW5zbGF0ZVggPCAtMTkpIHRyYW5zbGF0ZVggPSAtMTk7CiAgICAgIGlmKHRyYW5zbGF0ZVggPiAxNzEpIHRyYW5zbGF0ZVggPSAxNzE7CiAgICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJTbGlkZXItSGFuZGxlIikuc2V0QXR0cmlidXRlKCJ0cmFuc2Zvcm0iLCBgdHJhbnNsYXRlKCR7dHJhbnNsYXRlWH0gMClgKTsKICAgIH0pOwogICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoIlNsaWRlci1JbWFnZSIpLmFkZEV2ZW50TGlzdGVuZXIoIm1vdXNlbW92ZSIsIGUgPT4gewogICAgICBpZihkb3duKSB7CiAgICAgICAgbGV0IHAgPSB0b1NWR1BvaW50KGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJTbGlkZXItSW1hZ2UiKSwgZS5jbGllbnRYLCBlLmNsaWVudFkpOwogICAgICAgIGxldCB0cmFuc2xhdGVYID0gTWF0aC5jZWlsKChwLngtNTMpIC8gMTkpICogMTk7CiAgICAgICAgaWYodHJhbnNsYXRlWCA8IC0xOSkgdHJhbnNsYXRlWCA9IC0xOTsKICAgICAgICBpZih0cmFuc2xhdGVYID4gMTcxKSB0cmFuc2xhdGVYID0gMTcxOwogICAgICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJTbGlkZXItSGFuZGxlIikuc2V0QXR0cmlidXRlKCJ0cmFuc2Zvcm0iLCBgdHJhbnNsYXRlKCR7dHJhbnNsYXRlWH0gMClgKTsKICAgICAgfQogICAgfSk7CiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgiU2xpZGVyLUltYWdlIikuYWRkRXZlbnRMaXN0ZW5lcigibW91c2V1cCIsIGUgPT4gewogICAgICBkb3duID0gZmFsc2U7CiAgICB9KTsKICAvL11dPjwvc2NyaXB0Pgo8L3N2Zz4="></object>