SVG高度元素不动态？(SVG height element not dynamic?)

我试图使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>

当我在浏览器中查看此特定代码时，它会以宽度方式动态更新，但不是高度明智的。为什么？

与此方法相比，使用视图框然后使这些值动态化的优势是什么？为什么要做正确的方法？

I am trying to make the svg dynamically resize depending on the browser size.

<!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>

When I view this particular code in browser it is updating dynamically width wise, but not height wise. Why?

What is the advantage of using the view box and then making those values dynamic in comparison to this methodology? Why is correct way to do?

最满意答案

（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并不是很熟悉，但是基于阅读这个w3.org描述，似乎你将主要进行变换和缩放，那么使用ViewBox会更简单，因为你要复制什么一个ViewBox呢。

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

(1) Try adding

html{ height:100%; } body{ height:100%; }

to your style and your SVG will now style appropriately. What's happening is that your page's document.body is being sized to fit whatever contents are placed in it. It's essentially doing this:

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.

You can also set the body height to something else, like 500px (or even 10px if you want to override the min-height).

(2) I'm not very familiar with using a ViewBox but based on reading this w3.org description it seems like if you'll be doing mainly transforms and scaling, then using a ViewBox would be simpler since you'd be replicating what a ViewBox does.

Update: Apparently, Safari & Chrome work fine without the html{height:100%} style above, but not Firefox so make sure you add that in too.

更多推荐