调整浏览器窗口大小时，防止缩放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元素）也在缩放，因此我需要这些点具有固定的width和height 。

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

Answer 1

如果元素在SVG内，则在SVG进行缩放时会缩放。 您无法避免。

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

1. 这些非调整大小的元素是否应该成为SVG的一部分？ 是否应该将它们放置在绝对位于另一个顶部的单独的SVG中？

2. 如果要缩放某些元素而不缩放某些元素，则需要解决的方法是使用OnResize事件处理程序，该事件处理程序可以确定SVG坐标空间中元素的大小，并应用适合的transform属性。 因此，如果窗口变大，则应用变换将对象缩小适当的数量以进行补偿。 不用说，这是一个有点棘手的解决方法。