html - SVG height element not dynamic? -

I am trying to resize SVG dynamically based on browser size.

  & lt ;! DOCTYPE html & gt; & Lt; Html lang = "en" & gt; & Lt; Top & gt; & Lt; Script type = 'text / javascript' src = '.. / library / d3 / d 3.v3.min.js' & gt; & Lt; / Script & gt; & Lt; Meta charset = "UTF-8" & gt; & Lt; Title & gt; CIK workflow & lt; / Title & gt; & Lt; Style type = 'text / css' & gt; STVG {width: 80%; Height: 80%; Background: green; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Script & gt; Var Canvas = D3 Seal ('body'). Append ('SVG') & lt; / Script & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

1. When I look at this particular code in the browser, it is dynamically updating to width, but not according to height. Why?

2. What is the advantage of using the view box in comparison to this method and then making those values ​​dynamic? Why is the right way?

(1)

  Html {height: 100%; Body {height: 100%; }  

For your style and your SVG will now style properly, what is happening is that the content of your page's document.body Is being shaped to fit This is essentially doing this:

  Check the internal DOM elements to determine the height - & gt; SVG sees element and tries to shape based on it - & gt; There is no height set in the SVG element, so set the body in some browser-specified body min-height == & gt; SVG element ahead! - & gt; SVG height = 80% minimum body height  

You can set the body height to some 500px (or even 10px even if you want to override the minimum-height) .

(2) I 'is not very familiar with using a view box but it seems based on reading that if you mainly make conversions and scaling, then using a view box will be easy Because what you will do with a view box,

Update: Apparently, Safari & amp; Chrome works fine without html {height: 100%} style, but do not firefox if you add it also