可以在不改变X的情况下微调可拖动SVG形状的位置?

时间:2012-06-26 23:25:50

标签: javascript css svg draggable

我的项目的当前状态可以是seen here on jsFiddle 我想按摩滑块的行为只是一种微笑 我正在寻找一种方法来轻推它们,以便X值从每个滑块的中心进行注册。

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

我确信我可以想象一些非常讨厌的黑客,但我更喜欢更专业的方法:) 我的想法首先转到CSS(我有点希望稍微推动它),但到目前为止没有运气。
我现在的猜测是,它将归结为JS解决方案。

任何想法/想法?

1 个答案:

答案 0 :(得分: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/

P.S。这是一个非常漂亮的小部件,所以我无法抗拒改善你小提琴的互动,我希望你不介意!