Question

我正在尝试根据浏览器大小使svg动态调整大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <script type= 'text/javascript' src ='../libraries/d3/d3.v3.min.js'> </script>
    <meta charset="UTF-8">
    <title>CIQ workflow</title>

<style type='text/css'>

    svg{
        width:80%;
        height:80%;
        background:green;
    }
</style>
</head>
<body>

<script >
    var canvas = d3.select('body').append('svg')

</script>
</body>
</html>

当我在浏览器中查看此特定代码时，它会以宽度方式动态更新，但不是高度明智的。为什么呢？
与此方法相比，使用视图框然后使这些值动态化有什么优势？为什么要采用正确的方法？

Answer 1

（1）尝试添加

    html{
        height:100%; 
    } 

    body{
        height:100%;
    }

你的风格和你的SVG现在将适当的风格。发生的事情是您的页面document.body的大小适合放入其中的任何内容。它基本上是这样做的：

    Check inner DOM elements to determine height
        --> Sees SVG element and tries to size it based on that.
            --> SVG element has no height set so set body to some browser-specified
                body min-height
                ==> Onward to SVG element! 
                    --> SVG height = 80% body min-height.

您还可以将身高设置为其他值，例如500px（如果要覆盖最小高度，甚至可以设置为10px）。

（2）我对使用ViewBox并不是很熟悉，但基于阅读this w3.org description，看起来好像你主要进行变换和缩放，那么使用ViewBox会比你更简单复制ViewBox的功能。

更新：显然，Safari＆amp; Chrome在上面没有html{height:100%}样式的情况下工作正常，但不是Firefox，所以请确保您也添加它。

Answer 2

您可以做的另一件事是使用绝对定位：

svg {
    position: absolute;
    width:80%;
    height:80%;
    background:green;
}

你会得到你想要的尺寸，但这可能不适合你的情况。

Answer 3

如果您希望内联SVG填充整个浏览器窗口，您可以使用带有Javascript的viewBox，如下所示。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>SVG Fills Window Screen</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='overflow:hidden'>
<div id="svgDiv" style='position:absolute;top:0px;left:0px;background-color:lightgreen;'>
<svg id="mySVG">
<circle id="myCircle" cx="120" cy="180" r="40" fill="red" stroke="black" stroke-width="2" />
<rect id="myRect"  x="220" y="250" width="60" height="60" fill="blue" stroke="black" stroke-width="2"  />
<ellipse id="myEllipse1" cx="900" cy="1200" rx="150" ry="75" fill="yellow"  stroke="black" stroke-width="2"  />
<ellipse id="myEllipse2" cx="1900" cy="90" rx="150" ry="75" fill="yellow"  stroke="black" stroke-width="2"  />
<ellipse id="myEllipse3" cx="3900" cy="2200" rx="150" ry="75" fill="yellow"  stroke="black" stroke-width="2"  />
<text x="50%" y="50%"  text-anchor="middle" font-size="150">SVG image fills window screen</text>
</svg>
</div>

<script id=myScript>
//--onload, onresize----
function sizeFull()
{
    var svgW=window.innerWidth
    var svgH=window.innerHeight
    var bb=mySVG.getBBox()
    var bbx=bb.x
    var bby=bb.y
    var bbw=bb.width
    var bbh=bb.height
    mySVG.setAttribute("viewBox",bbx+" "+bby+" "+bbw+" "+bbh )
    mySVG.setAttribute("width",svgW)
    mySVG.setAttribute("height",svgH)
}
document.addEventListener("onload",sizeFull(),false)
window.onresize=sizeFull
</script>

</body>

</html>

SVG高度元素不动态？

3 个答案: