防止在调整浏览器窗口大小时缩放 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 elemnts) 也在缩放，我需要这些点具有固定的宽度和高度。

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

Answer 1

如果一个元素在 SVG 中，那么它会在 SVG 出现时进行缩放。你无法阻止它。

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

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

1234563 transform 适合的属性。因此，如果窗口变大，您可以应用将对象缩小适当数量的变换以进行补偿。不用说，这是一个有点老套的解决方法。