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

Question

我有一个 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>

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

我的问题是点(图像元素)也在缩放，我需要这些点具有固定的宽度和高度。

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

Answer 1

如果某个元素位于 SVG 内部，那么它会随着 SVG 的缩放而缩放。你无法阻止这种情况。

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

1. 那些不可调整大小的元素是否应该成为 SVG 的一部分？它们是否应该位于一个单独的 SVG 中，并且绝对位于另一个 SVG 之上？

2. 如果您希望某些元素缩放而其他元素不缩放，那么解决方法是使用 OnResize 事件处理程序来计算 SVG 坐标空间中元素大小所需的大小并应用transform 属性以适应。因此，如果窗口变大，您可以应用变换将对象缩小适当的量以进行补偿。不用说，这是一个有点狡猾的解决方法。