調整瀏覽器窗口大小時，防止縮放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屬性。 因此，如果窗口變大，則應用變換將對象縮小適當的數量以進行補償。 不用說，這是一個有點棘手的解決方法。