更改 svg 路径的 0,0 位置

Question

我有一个 svg 路径如下：

'M12,2 C 8.13,2 5,5.13 5,9 c 0,5.25 7,13 7,13s7,-7.75 7,-13C19,5.13 15.87,2 12,2zM7,9c0,-2.76 2.24,-5 5,-5s5,2.24 5,5c0,2.88 -2.88,7.19 -5,9.88C9.92,16.21 7,11.85 7,9z M12,9m-2.5,0a2.5,2.5 0,1 1,5 0a2.5,2.5 0,1 1,-5 0'

现在尖端点在 (12,22)，我想保持形状不变，但尖端点在 (0,0)。

哪个工具可以做这样的位置偏移？

Answer 1

一种可能的解决方案是使用 this tool 将路径转换为 all-relative 路径命令。

例如转换：

M12,2 C 8.13,2 5,5.13 5,9 c 0,5.25 7,13 7,13s7,-7.75 7,-13C19,5.13 15.87,2 12,2zM7,9c0,-2.76 2.24,-5 5,-5s5,2.24 5,5c0,2.88 -2.88,7.19 -5,9.88C9.92,16.21 7,11.85 7,9z M12,9m-2.5,0a2.5,2.5 0,1 1,5 0a2.5,2.5 0,1 1,-5 0

至：

M12,2c-3.87,0,-7,3.13,-7,7c0,5.25,7,13,7,13s7,-7.75,7,-13c0,-3.87,-3.13,-7,-7,-7zm-5,7c0,-2.76,2.24,-5,5,-5s5,2.24,5,5c0,2.88,-2.88,7.19,-5,9.88c-2.08,-2.67,-5,-7.03,-5,-9.88zm5,0m-2.5,0a2.5,2.5,0,1,1,5,0a2.5,2.5,0,1,1,-5,0

现在为了将它移动到 0,0，只需将初始 M 命令后的前两个值从 12,2 更改为 0,-18。

第一个值为0，表示周二顶部和尖端的x值。第二个值为-18，表示几乎位于顶部的路径起点的y 值。为了得到这个值，我做了：2（点的实际 y 坐标）- 20（路径的高度）。

为了获得我正在使用的路径的高度getBBox()

console.log(g.getBBox())

svg{width:30vh;border:solid}

<svg viewBox="-7 -18 14 20">
<path id="g" d="M0,-18c-3.87,0,-7,3.13,-7,7c0,5.25,7,13,7,13s7,-7.75,7,-13c0,-3.87,-3.13,-7,-7,-7zm-5,7c0,-2.76,2.24,-5,5,-5s5,2.24,5,5c0,2.88,-2.88,7.19,-5,9.88c-2.08,-2.67,-5,-7.03,-5,-9.88zm5,0m-2.5,0a2.5,2.5,0,1,1,5,0a2.5,2.5,0,1,1,-5,0"/>
</svg>

更改 svg 路径的 0,0 位置

change 0,0 position of svg path

svg