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

Question

I have a SVG image which is basically a background with other points (images) on it.

Here is my code:

<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>

With jQuery I change the #svg-background div to fit the browser width, so I have a SVG background that fits the whole browser width, and it is scaling very well.

My problem is that the points (image elemnts) are scaling too and I need these points have a fixed width and height.

How can I prevent a SVG element to be scaled when the browser window is resized?

Answer 1

If an element is inside the SVG, then it gets scaled when the SVG does. You can't prevent that.

You have a couple of potential solutions:

1. Should those non-resizing elements even be a part of the SVG? Should they instead be in a separate SVG that is absolutely positioned on top of the other one?

2. If you want some elements to be scaled and others that aren't, then a work around would be to have an OnResize event handler that worked out what the element size needs to be in SVG coordinate space and applied a transform attribute to suit. So if the window gets bigger, you apply a transform that scales the object down by an appropriate amount to compensate. Needless to say, it's a bit of a hacky workaround.