javascript - 如何将 ViewBox svg 转换为零初始坐标？

Question

我有以下带有 viewBox 的 svg:

viewBox="16.350 -671.025 1150.675 852.600"

<svg xmlns="http://www.w3.org/2000/svg" viewBox="16.350 -671.025 1150.675 852.600" width="1150.675px" height="852.600px">
<circle cx="1006.275" cy="-420.45" r="5" fill="#000" class="pointer" id="controurcircle_1"></circle>
</svg>

如您所见 viewBox包含初始用户坐标。如果我把它改成 0,0作为标准，圆的坐标应该如何变化？

let circleX = Math.abs(Math.abs(1006.275) + Math.abs(16.350));
let circleY = Math.abs(Math.abs(-420.45) - Math.abs(-671.025));

对？

Answer 1

我不知道为什么你有所有的 abs()在那里打电话。
您需要从所有(绝对)坐标中减去 viewBox minX 和 minY 字段。不要更改任何 <path> 中的任何相对坐标对(小写路径命令)你可能拥有的元素。

viewBox="0 0 1150.675 852.600"

let circleX = 1006.275 - 16.350;
let circleY = -420.45 - (-671.025);  // = -420.45 + 671.025