当浏览器窗口大小改变时，防止SVG元素缩放

Question

我有一个SVG图像，基本上是一个带有其他点（images）的背景。

这是我的代码：

<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>

使用jQuery，我将#svg-background div更改为适合浏览器宽度的大小，因此我有一个SVG背景可以适应整个浏览器宽度，并且缩放效果非常好。

我的问题是，这些点（image元素）也在缩放，而我需要这些点具有固定的宽度和高度。

如何防止SVG元素在浏览器窗口调整大小时被缩放？

- ilazgo

Answer 1

如果一个元素在SVG中，那么它会随着SVG的缩放而缩放。你无法阻止这种情况。

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

1. 那些不需要调整大小的元素是否应该成为SVG的一部分？它们是否应该放在另一个绝对定位在上面的SVG中？

2. 如果你希望某些元素被缩放而其他元素不被缩放，则可以通过OnResize事件处理程序计算出元素在SVG坐标空间中需要的大小，并应用相应的transform属性。因此，如果窗口变大，你可以应用一个适当的缩小对象的变换来进行补偿。不用说，这是一个有点hacky的解决方法。

- Paul LeBeau

---

最终，我通过您的第二个解决方案得到了我想要的结果。我没有进行任何性能测试，所以我不知道它是否是最佳解决方案。 - ilazgo