X를 변경하지 않고 드래그 가능한 SVG 모양의 위치를 ​​미세 조정하십시오.

Question

내 프로젝트의 현재 상태는 seen here on jsFiddle 일 수 있습니다.
나는 슬라이더의 동작을 단지 멍청하게 마사지하고 싶습니다.
나는 각 슬라이더의 중심에서 X 값을 등록하도록 슬라이더를 이동하는 방법을 찾고 있습니다.

슬라이더는 입력 값을 멋지게 설정하지만 X 값은 "중심 질량"이 아니라 앞쪽 가장자리에 따라 달라지기 때문에 조금 부자연 스럽습니다.
최대한 왼쪽으로 슬라이더를 이동하면 은 짧게 멈추는 것처럼이 느껴집니다. 가능한 멀리 오른쪽으로 이동하면 경계를 넘어서게됩니다. ,

는 내가 정말 불쾌한 해킹을 상상할 수있는 확신 해요,하지만 난 많은 (내가 좀 그냥 조금을 찔러 기대했다)보다 전문적인 접근 방식 :
내 생각이 먼저 CSS에 갔다 원합니다 그러나 운 없음 지금까지.
내 생각에 JS 솔루션으로 종결 될 것입니다.

의견/아이디어?

Answer 1

변환을 통해 x 값을 변경하지 않고 위치를 조정할 수 있습니다. http://jsfiddle.net/mzmRN/

추신 : 당신이 필요합니다 ... transform 속성을 추가

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

당신은 여기에서 데모를 볼 수 있습니다 그것은 꽤 멋진 위젯입니다, 그래서 나는 당신의 바이올린의 상호 작용을 개선하는 것에 저항 할 수 없었습니다.