javascript - 在不改变 X 的情况下微调可拖动 SVG 形状的位置？

Question

我元素的当前状态可以是seen here on jsFiddle .
我想稍微调整一下 slider 的行为。
我正在寻找一种方法来插入它们，以便 X 值从每个 slider 的中心开始注册。

如您所见， slider 很好地设置了输入值，但它们看起来/感觉起来有点不自然，因为 X 值是根据前缘而不是“中心质量”。
尽可能向左移动 slider ，感觉它突然停了下来。将它尽可能地向右移动感觉就像它超出了它的边界。

我敢肯定我能想出一些非常讨厌的技巧，但我更喜欢更专业的方法:)
我首先想到了 CSS(我有点希望只是稍微插入一下)，但到目前为止运气不好。
我现在的猜测是它将归结为 JS 解决方案。

有什么想法/想法吗？

Answer 1

您可以在不改变 x 值的情况下通过变换调整位置。您只需要添加 transform 属性...

    <rect id="rect_slider_knob"
         class="slidable"
         width="4%"
         height="24%" 
         y="38%"
         rx="2%"
         ry="3%"
         stroke="#666" 
         transform="translate(-6, 0)"
    />

您可以在此处查看演示:http://jsfiddle.net/mzmRN/

附言这是一个非常好的小部件，所以我忍不住要改进你的 fiddle 的交互，希望你不介意!