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

【问题标题】：How to convert ViewBox svg to zero initial coordinates?如何将 ViewBox svg 转换为零初始坐标？
【发布时间】：2021-10-07 17:38:05
【问题描述】：

我有以下带有 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));

对吗？

【问题讨论】：

首先您应该清楚地解释为什么保留该 svg 而不是创建一个新的 viewBox x 和 y 值为 0 的地方对您很重要？你说这个 viewBox 包含初始用户坐标。你是什么意思？我从第一天就开始使用 svgs，并且从未见过任何具有这样 viewBox 值的 svg。无论如何，当我在浏览器中打开它时，您的 svg 是一个小黑圈，显示在屏幕的某个额外位置。您使用它的角色是什么？

标签： javascript math svg coordinates

【解决方案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

【讨论】：