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

Question

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

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

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

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

并在 div 元素之后立即使用 Javascript 设置其 viewBox 属性:

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

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

Answer 1

viewBox 定义了 svg 内部使用的坐标系，它不会改变 svg 的大小。如果你有一个 viewBox，你只需要设置 svg 的宽度和高度(例如使用 CSS)，它就会呈现那个大小。