Question 44957 in Html Question posted in
Some basic documentation can be found here.

How can I create an svg tag with the same dimention as the browser window? – Html

Suppose, I have the following HTML page:

<!DOCTYPE html>
<html>
<head>
    <title>Protein Structure Analyzer</title>
</head>
<body>
<div class="menu-strip">
    <ul>
      <li><a href="{{ url_for('index') }}">Home</a></li>
      <li><a href="{{ url_for('jobs_table') }}">Jobs</a></li>
      <li><a href="#">Help</a></li>
    </ul>
  </div>
<div class="angry-grid">
    <form>
        <div class="header-div">SURPASS Plots</div>
        <div class="form-div">
            <div id="viewer_box" class="box"></div>
            <button id="show_hide" >Show/hide</button>
            <button id="rem" >Remove</button>
            <button id="color" >Color</button>
            <button id="zoom" >Zoom</button>
        </div>
        <div class="plot-div">
            <svg  id="svg" 
                  xmlns="http://www.w3.org/2000/svg"
                  class="right" width="window.innerWidth" height="window.innerHeight">
            </svg>
        </div>

        <div class="footer-div">
            Footer
        </div>
    </form>
</div>
</body>
</html>

There is an SVG tag in the page.

I want this tag to automatically acquire the dimension of the browser window.

Therefore, I wrote

<svg ... width="window.innerWidth" height="window.innerHeight" ...></svg>

However, this is raising error in the browser’s debug console:

Error: <svg> attribute width: Expected length, "window.innerWidt…".

How can I resolve this error?

Tags:

2

Answers


  1. 0

    Try it with CSS:

    <svg ... style="height: 100vh; width: 100vw" ...></svg>

    Or if you have a container around it you could also use 100%

    Login or Signup to reply.
  2. 0

    It depends on what you mean by "browser window" so let’s get screen sizes cleared up first because there are actually three of them:

    1. Screen Size (mine is 1920 x 1080 pixels)

    2. Browser Size (mine is 1920 x 1040 pixels)

    3. Viewport Size (mine is 1920 x 980 pixels)

    To get each of these sets of values use…

    1. screen.width and screen.height

    2. visualViewport.width and visualViewport.height

    3. W.offsetWidth and W.offsetHeight

    NB: Where "W" is the window ID.

    I know you’ve accepted the answer by SickerDude43, but I personally wouldn’t use that method because the browser may not be full screen at that moment or some other CSS body styling affecting what "100%" really means.

    Using one of the above sets of screen values I’ve given you, is a more robust solution IMHO.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search