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元素）也在缩放，我需要这些点具有固定的宽度和高度。

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

Answer 1

如果一个元素在SVG中，那么当SVG执行时它会被缩放。你不能阻止它。

您有几个可能的解决方案：

那些非调整大小的元素是否应该成为SVG的一部分？它们应该是一个单独的SVG，绝对位于另一个SVG之上吗？
如果你想要一些元素被缩放而另一些元素没有被缩放，那么解决方法就是有一个OnResize事件处理程序来计算出SVG坐标空间中元素大小需要的东西。应用transform属性以适应。因此，如果窗口变大，则应用变换，将对象缩小适当的量以进行补偿。不用说，这有点像一个黑客的解决方法。

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

1 个答案: