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

Question

我正在使用使用背景图片的绘图应用。使用浏览器窗口缩放容器和背景图像。

但是，绘制的线条没有按容器/背景缩放。因此，如果浏览器将图像缩小50％，那么在100x100绘图上从1,1-> 50,50开始，最终会在整个图像中移动。

是否有路径标记可以使这种缩放工作（例如下面的svg）。

我尝试过preserveAspectRatio并设置了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>