我有一個 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)。
哪個工具可以做這樣的位移？
uj5u.com熱心網友回復：
一種可能的解決方案是使用此工具將路徑轉換為所有相對路徑命令。
例如轉換：
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，表示 tue top 和 tip 的 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/475336.html
標籤：svg