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

Prevent a SVG element to be scaled when the browser window is resized

本文关键字：小时 缩放 SVG 元素 调整 浏览器 窗口      更新时间：2023-09-26

我有一个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-backgrounddiv以适应浏览器的宽度，所以我有一个适合整个浏览器宽度的SVG背景，它的缩放非常好。

我的问题是点(image元素)也缩放和我需要这些点有一个固定的宽度和高度。

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

如果一个元素在SVG中，那么当SVG缩放时它会被缩放。这是无法阻止的。

你有两个可能的解决方案:

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

  2. 如果你想要一些元素被缩放，而其他的不是，那么一个工作将是有一个OnResize事件处理程序，它计算出元素大小需要在SVG坐标空间中，并应用transform属性来适应。如果窗口变大，你应用一个变换把对象按适当的比例缩小来补偿。不用说，这是一个有点黑客的解决方案。

相关文章：