在页面加载时根据 div 大小缩放硬编码的 SVG 图像

Question

我有一个 div 元素，其中包含一个 svg 图形（一堆圆和边），我还在 svg 元素上设置了 viewBox 属性。图中的节点和边的坐标在px 中针对指定的屏幕大小（因此也针对指定的div 大小）进行了硬编码。使用所需的div 大小，图表可以很好地加载，并且在调整浏览器窗口大小时也可以上下缩放。

但是，每当在不同的屏幕/div 尺寸下加载页面时，我的问题就会出现，因为 svg 图像对于之前指定的 div 尺寸保持不变。这会创建一个对于较小的浏览器/屏幕尺寸来说太大的图像。

我为svg 元素设置了以下内容：

<svg id="mygraph" preserveAspectRatio="xMidYMid meet">

并使用 Javascript 设置其 viewBox 属性，紧跟在 div 元素之后：

<script type="text/javascript">
    document.getElementById("mygraph").setAttribute("viewBox", "0 0 " + $("#graphdiv").width() + " " + $("#graphdiv").height());
</script>

这并不能解决问题。那我还能尝试什么？

Answer 1

viewBox 定义了 svg 内部使用的坐标系，它不会改变 svg 的大小。如果您有一个 viewBox，您只需要设置 svg 的宽度和高度（例如使用 CSS），它就会呈现为该尺寸。