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

我的项目的当前状态可以是seen here on jsFiddle。
我想按摩一下滑块的行为。
我正在寻找一种微调它们的方法，以使X值从每个滑块的中心对齐。

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

我敢肯定，我可以想象出一些非常讨厌的骇客，但我更喜欢一种更专业的方法：)
我的想法首先出现在CSS上（我有点希望稍微推动一下），但是到目前为止还没有运气。
我现在的猜测是它将归结为JS解决方案。

有什么想法/想法吗？

最佳答案

您可以通过转换来调整位置，而无需更改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/

附言这是一个非常不错的小部件，所以我无法抗拒改善您的提琴的互动性，希望您不要介意！