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

Question

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

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

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

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

并在viewBox元素之后立即使用Javascript设置其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），它将渲染到那个大小。