0

我有一个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>

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

4

1 回答 1

2

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

于 2012-09-04T09:25:04.397 回答