英文:
How can I create an svg tag with the same dimention as the browser window?
问题
以下是翻译好的部分：
假设我有以下HTML页面：
<!DOCTYPE html>
<html>
<head>
<title>蛋白质结构分析器</title>
</head>
<body>
<div class="menu-strip">
<ul>
<li><a href="{{ url_for('index') }}">主页</a></li>
<li><a href="{{ url_for('jobs_table') }}">工作</a></li>
<li><a href="#">帮助</a></li>
</ul>
</div>
<div class="angry-grid">
<form>
<div class="header-div">SURPASS 图表</div>
<div class="form-div">
<div id="viewer_box" class="box"></div>
<button id="show_hide" >显示/隐藏</button>
<button id="rem" >移除</button>
<button id="color" >颜色</button>
<button id="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">
页脚
</div>
</form>
</div>
</body>
</html>
在页面中有一个SVG标签。
我希望这个标签可以自动获取浏览器窗口的尺寸。
因此，我写了：
<svg ... width="window.innerWidth" height="window.innerHeight" ...></svg>
然而，在浏览器的调试控制台中出现了错误：
错误： <svg> 属性 width：预期的长度，"window.innerWidth"。
如何解决这个错误？
英文:
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?
答案1
得分: 2
尝试使用CSS：
<svg ... style="height: 100vh; width: 100vw" ...></svg>
或者，如果您在其周围有一个容器，您也可以使用100%。
英文:
Try it with CSS:
<svg ... style="height: 100vh; width: 100vw" ...></svg>
Or if you have a container around it you could also use 100%
答案2
得分: 1
-
Screen Size（我的屏幕尺寸为1920 x 1080像素）
-
Browser Size（我的浏览器尺寸为1920 x 1040像素）
-
Viewport Size（我的视口尺寸为1920 x 980像素）
要获取这些值集中的每一个，请使用...
-
screen.width 和 screen.height
-
visualViewport.width 和 visualViewport.height
-
W.offsetWidth 和 W.offsetHeight
注意：其中，“W”是窗口ID。
我知道你已经接受了SickerDude43的答案，但个人而言，我不会使用那种方法，因为浏览器可能在那一刻不是全屏，或者一些其他CSS样式可能会影响“100%”的真实含义。
在我给出的上述屏幕值集之一中使用，依我个人看来是更可靠的解决方案。
英文:
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:
-
Screen Size (mine is 1920 x 1080 pixels)
-
Browser Size (mine is 1920 x 1040 pixels)
-
Viewport Size (mine is 1920 x 980 pixels)
To get each of these sets of values use...
-
screen.width and screen.height
-
visualViewport.width and visualViewport.height
-
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论