Jquery ui 使用jQuery UI滑块移动和缩放svg元素时遇到问题？

我有一个定义了文本和路径的SVG元素。请参阅我的示例代码

文本可以根据需要工作，从中心缩放，并且可以精确定位，但是我发现我在路径方面遇到了严重的问题

当我触摸滑块移动x或y时，刻度会被弹出，并且它总是从左上角开始缩放。我在网上尝试了许多示例，但运气不好，所以我清理了示例代码

我希望能够从它的中心缩放路径，当我改变它的位置时，它不会影响缩放

$（“.slider-x”）.slider({
最小：-530，
最高：530，
价值：165，
幻灯片：函数（）{
变量x=$（“.slider-x”）.slider（“值”），
y=$（“.slider-y”）。slider（“值”）；
$（'.svg size'）.attr（“转换”、“转换”（“+x+”，“+y+”））；
}
});
$（“.slider-y”）.slider({
最小值：-250，
最高：250，
值：-50，
幻灯片：函数（）{
变量x=$（“.slider-x”）.slider（“值”），
y=$（“.slider-y”）。slider（“值”）；
$（'.svg size'）.attr（“转换”、“转换”（“+x+”，“+y+”））；
}
});
$（“.slider scale”）.slider({
民:1,，
最高：100，
价值：40，
幻灯片：函数（）{
变量x=$（“.slider-x”）.slider（“值”），
y=$（“.slider-y”）。slider（“值”）；
变量比例=$（“.slider scale”）.slider（“value”）；
$（'.svg size'）.attr（“转换”、“平移”（+x+）、“+y+”）比例（“+scale/100+”））；
}
});
$（“.slider scale title text”）.slider({
民:1,，
最高：100，
价值：40，
幻灯片：函数（）{
变量比例=$（“.slider scale title text”）.slider（“value”）；
$（'.svg business title'）.css（“字体大小”，比例+“px”）；
}
});
$（“.slider-text-x”）.slider({
最低：-100，
最高：635，
价值：250，
幻灯片：函数（）{
变量x=$（“.slider-text-x”）.slider（“值”），
y=$（“.slider-text-y”）。slider（“值”）；
$（'.title text'）.attr（“x”，x）；
}
});
$（“.slider-text-y”）.slider({
分:0,，
最高：210，
价值：150，
幻灯片：函数（）{
变量x=$（“.slider-text-x”）.slider（“值”），
y=$（“.slider-text-y”）。slider（“值”）；
$（'.title text'）.attr（“y”，y）；
}
});
h3{
字体系列：verdana；
}
.svg商业名称{
填充物：棕色；
笔画宽度：4；
}
.svg带线{
填充物：红色；
笔画宽度：4；
}
.svg自定义徽标包装器{
填充：#94d31b；
位置：绝对位置；
左侧：0；顶部：0；宽度：100%；高度：100%；
}
.svg包装器{
宽度：100%；
位置：相对位置；
高度：180像素；
}
.svg容器{
最大宽度：535px；
保证金：0自动；
}
.重音-颜色-1{
填充物：红色；
}
.重音-颜色-2{
填充：绿色；
}
.svg大小{
/*变换：比例（0.2）；
-ms变换：比例（0.2）；
-webkit变换：比例（0.2）*/
/*变换原点：270px 5px*/
}
.slider控件、.slider缩放标题文本{
最大宽度：540像素；
}
.滑块，输入{
利润率：10px 0 10px 10px；
}
钮扣{
保证金：5px0；
}

标题文本在这里
标志

X
Y
规模
正文

X
Y
规模
您对三个独立的操作使用了一个转换属性，实际上覆盖了需要维护的值。此外，transform=“scale（）”始终围绕局部坐标系的原点进行缩放。因此，要在适当的位置缩放路径，它们必须以x=y=0为中心

以可维护的方式纠正情况的步骤：

将转换和缩放路径分布到两个封闭组中，外部为转换（
.svg position
），内部为缩放（
.svg size
）

确定路径的中心：

document.querySelector('.svg-size').getBBox()
// returns { x: 27, y: 108, width: 458, height: 296 }
// => center at 256, 256


引入一个将路径移动到原点的内部组：
translate（-256，-256）

将256*0.4=102（四舍五入）添加到起始平移，以使路径返回其初始位置

相应地调整比例值


$（“.slider-x”）.slider({
最小值：-430，
最高：630，
价值：267，
幻灯片：函数（）{
变量x=$（“.slider-x”）.slider（“值”），
y=$（“.slider-y”）。slider（“值”）；
$（'.svg position'）.attr（“transform”，“translate”（“+x+”，“+y+”））；
}
});
$（“.slider-y”）.slider({
最低：-150，
最高：350，
价值：52，
幻灯片：函数（）{
变量x=$（“.slider-x”）.slider（“值”），
y=$（“.slider-y”）。slider（“值”）；
$（'.svg position'）.attr（“transform”，“translate”（“+x+”，“+y+”））；
}
});
$（“.slider scale”）.slider({
民:1,，
最高：100，
价值：40，
幻灯片：函数（）{
变量x=$（“.slider-x”）.slider（“值”），
y=$（“.slider-y”）。slider（“值”）；
变量比例=$（“.slider scale”）.slider（“value”）；
$（'.svg size'）.attr（“转换”、“缩放”（+scale/100+））；
}
});
$（“.slider scale title text”）.slider({
民:1,，
最高：100，
价值：40，
幻灯片：函数（）{
变量比例=$（“.slider scale title text”）.slider（“value”）；
$（'.svg business title'）.css（“字体大小”，比例+“px”）；
}
});
$（“.slider-text-x”）.slider({
最低：-100，
最高：635，
价值：250，
幻灯片：函数（）{
变量x=$（“.slider-text-x”）.slider（“值”），
y=$（“.slider-text-y”）。slider（“值”）；
$（'.title text'）.attr（“x”，x）；
}
});
$（“.slider-text-y”）.slider({
分:0,，
最高：210，
价值：150，
幻灯片：函数（）{
变量x=$（“.slider-text-x”）.slider（“值”），
y=$（“.slider-text-y”）。slider（“值”）；
$（'.title text'）.attr（“y”，y）；
}
});
h3{
字体系列：