Javascript 防止在调整浏览器窗口大小时缩放SVG元素

我有一个SVG图像，它基本上是一个背景，上面有其他点（

图像

）

这是我的密码：

<div class="svg-background" style="width: 1920px;>
    <svg xml:space="preserve" enable-background="new 0 0 1600 640" viewBox="0 0 1600 640" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg" width="100%" height="100%">
        <!-- ...SVG code... -->
        <image id="point" href="point.png" width="49" height="49" alt="point" class="svg-point" x="100" y="200"/>
        <!-- and more points... -->
    </svg>
</div>

---

如果元素在SVG中，那么当SVG中有元素时，它会被缩放。你无法阻止

您有几个潜在的解决方案：

这些不调整大小的元素是否应该成为SVG的一部分？它们应该放在一个单独的SVG中，并且绝对位于另一个SVG的顶部吗

如果希望缩放某些元素而不缩放其他元素，那么解决方法是使用OnResize事件处理程序，该处理程序计算出SVG坐标空间中元素的大小，并应用一个
transform
属性以适合。因此，如果窗口变大，则应用变换，将对象缩小适当的比例以进行补偿。不用说，这是一个有点老套的解决办法

最后，我得到了我想要的第二个解决方案。我没有做任何性能测试，所以我不知道这是否是最好的解决方案。