如何将 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

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

How to convert ViewBox svg to zero initial coordinates?

javascript

math

svg

coordinates