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

我有一个div元素，其中包含svg图形（一串圆和边），并且我还在svg元素上设置了viewBox属性。在px中，图表中节点和边的坐标对指定的屏幕尺寸（因此也适用于指定的div尺寸）进行硬编码。使用期望的div大小时，图形加载得很好，并且在浏览器窗口大小调整时也可以向上和向下缩放。根据页面加载时的div大小缩放硬编码的SVG图像

但是，每当页面在不同的屏幕/ 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>

这并不解决问题。那么我还有什么可以尝试的？

来源

2012-09-03 skyork

viewBox定义了svg中使用的坐标系，它不会改变svg的大小。如果你有一个viewBox，你只需要设置svg的宽度和高度（例如使用CSS），它将渲染到这个尺寸。

来源

2012-09-04 09:25:04

确实，我可以通过Javascript更改'svg'的宽度和高度。或者，我可以将viewBox属性固定为所需的大小，并且应该照顾不同的屏幕/窗口大小，正如我意识到的那样。谢谢！ – skyork

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

回答

相关问题