如何解决SVG设置浏览器窗口尺寸时的属性报错问题？

你遇到的问题是因为SVG的width和height属性只接受具体的长度值（比如800px、100%），直接写window.innerWidth会被浏览器当成普通字符串，不符合长度格式规范，所以抛出错误。下面给两种实用的解决方法：

方法一：用JavaScript动态设置尺寸 #

把SVG的width/height属性清空，然后通过JS在页面加载和窗口大小变化时动态赋值：

<svg id="svg" xmlns="http://www.w3.org/2000/svg" class="right"></svg>

<script>
// 定义设置尺寸的函数
function updateSvgSize() {
  const svgElement = document.getElementById('svg');
  svgElement.setAttribute('width', window.innerWidth);
  svgElement.setAttribute('height', window.innerHeight);
}

// 页面加载完成后初始化尺寸
window.addEventListener('load', updateSvgSize);
// 窗口大小改变时重新调整尺寸
window.addEventListener('resize', updateSvgSize);
</script>

方法二：用CSS实现自适应（更简洁） #

通过CSS让SVG直接占满视口，不需要JS（如果不需要精确控制尺寸变化的细节）：

首先修改CSS（可以放在<head>里的<style>标签中）：

.right {
  width: 100vw; /* 占满视口宽度 */
  height: 100vh; /* 占满视口高度 */
  display: block; /* 消除SVG默认行内元素的间距问题 */
}

然后修改SVG标签，去掉width和height属性：

<svg id="svg" xmlns="http://www.w3.org/2000/svg" class="right"></svg>

两种方法都能解决你的报错，根据需求选择就行——如果需要在尺寸变化时做额外逻辑，选JS方法；如果只是单纯占满窗口，CSS方法更省心。

内容的提问来源于stack exchange，提问作者user366312