D3.js 使用背景图像/浏览器缩放svg路径

我正在开发一个使用背景图像的绘图应用程序。容器和背景图像通过浏览器窗口进行缩放

但是，绘制的线不会随容器/背景缩放。因此，如果浏览器将图像缩小50%，在100x100图形上从1,1->50,50的某些内容最终会在整个图像中出现

是否有路径的标记使这种缩放能够工作（下面的svg示例）

我已尝试保留Aspectratio并设置viewBox

<svg>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="./background.svg" height="100%" width="100%"></image>
  <g>
    <path class="shot" d="M243,190 L650,199"></path>
    <path d="M242.77892382381336,199.9975559675514 L649.7789238238133,208.9975559675514" class="shot-parallel"></path>
  </g>
  <g class="active">
    <path class="shot" d="M269,321 L411,368"></path>
    <path d="M265.8577860915356,330.49349734046694 L407.8577860915356,377.49349734046694" class="shot-parallel"></path>
  </g>
</svg>

您尝试过在background.svg？中设置一个viewBox，这实际上帮了大忙；我还注意到，在父SVG中，我将viewBox设置为“viewBox”，而不是浏览器不喜欢的“viewBox”。固定后（以及背景集中的viewBox，缩放效果为100%）。然而，现在我很难根据新的viewBox坐标在SVG中捕获鼠标事件。有没有办法在viewBox中获取事件坐标？在快速搜索之后，我发现了d3.mouse（SvgElement），我可以用它来表示SVG图像的[x，y]局部坐标-一切都很闪亮！您已经尝试过在background.svg？中设置一个viewBox，这实际上很有帮助；我还注意到，在父SVG中，我将viewBox设置为“viewBox”，而不是浏览器不喜欢的“viewBox”。固定后（以及背景集中的viewBox，缩放效果为100%）。然而，现在我很难根据新的viewBox坐标在SVG中捕获鼠标事件。有没有办法在viewBox中获取事件坐标？在快速搜索之后，我发现了d3.mouse（SvgElement），我可以用它来表示SVG图像的[x，y]局部坐标-一切都很闪亮！