Javascript中SVG路径0-1范围转换

我发现这个有用的PHP脚本可以使我的SVG路径相对于容器，因此在前端实现时具有响应性

$absolute_path = "M0,67.9586133 M0,67.9586133.....Z";
function regex_callback($matches) {
    static $count = -1;
    $count++;
    $width = 1072.01;
    $height = 399.23;
    if($count % 2) {
        return $matches[0] / $height;
    } else {
        return $matches[0] / $width;
    }
}

$relative_path = preg_replace_callback('(\d+(\.\d+)?)', 'regex_callback', $absolute_path);

资料来源：

由于目前我正在使用JavaScript和Node，所以我尝试使用JavaScript重新创建此函数。这是我到目前为止得到的，但我被卡住了，因为返回的数据与输入的数据完全相同

函数替换器（匹配、svgWidth、svgHeight）{
让计数=-1；
计数++；
如果（计数%2）{
返回匹配[0]/svgHeight；
}否则{
返回匹配[0]/svgWidth；
}
}
设svgPath=“M0,67.9586133 M0,67.9586133…”
让nuPath=svgPath.replace（“（\d+（\。\d+）”），replacer；
console.log（nuPath）使用带有全局标志的：

let nuPath = svgPath.replace(/(\d+(\.\d+)?)/g, replacer);

此外，必须在函数外部定义宽度和高度：

let svgHeight = 399.23;
let svgWidth = 1072.01;

最后，必须删除未使用的函数参数：

let count = -1;
function replacer(match) {
  count++;
  if (count % 2) {
    return match / svgHeight;
  } else {
    return match / svgWidth;
  }
}

为什么不使用
元素来保持它的响应性呢？我将SVG用作带有
clipPathUnits=“objectBoundingBox”
的clipPath，据我所知，要使其响应，单位需要为0-1。如果我错了，请告诉我！什么样的SVG需要在其坐标中有这么多有效数字？XD无论如何，您可以在某些情况下设置
viewBox
属性，您尝试过吗？PHP代码分别使用值
1072.01
和
399.23
对
$height
和
$width
进行硬编码。JavaScript代码试图从字符串本身获取
svghight
和
svgWidth
值，因此它们的值（如果写得正确）
“67.9586133”
和
“67.9586133”
。你不能在一个函数中放入不同的值并期望得到相同的结果。谢谢@JordanRunning——我实际上在JS函数中传递了与svghight和svgWidth相同的值——避免了在问题中包含不必要的代码，但我意识到这并不清楚！感谢您的回复——非常清楚，但是输出与原始PHP脚本提供的不同。例如：通过将路径传递给
“M0,67.9586133 L53.72258297.209905…”
，PHP将输出：
“M0,0.170224214864 L0.0501138795347…”
，而JS将输出：
“M0，0.005596962714900048 L0.004664135595750039..
。这看起来像是人为的错误，但我仔细检查了一遍，找不到原因。我已从函数中取出
count
变量。顺便说一下，直接从PHP转换的代码是脏的。谢谢你！非常感谢您的帮助--仍然存在输出不正确的问题，但我现在可以看到进展，因为至少我得到了与原始输入不同的输出。它现在输出什么？PHP:
M0,0.170224214864 L0.0501138795347,0.744457843843849…
和JS:
M0,0.0150289063581293 L0.004664135595750039,0.005009643563860431
这里是一个代码笔示例：。请记住，我使用的是Vue.js，所以最初makeResponsive是一种方法，等等……但你明白了。如果您检查控制台，您将看到PHP代码输出形式的差异。