SVG支持检测的If语句未给body添加类的问题排查

嘿，我来帮你搞定这个SVG检测的问题！

首先，咱们先把SVG支持检测的正确逻辑理清楚——你提到的“标准W3语句”其实核心是要验证浏览器能否正确识别SVG命名空间下的元素，以及具备SVG的基础方法。很多人会踩的坑是直接用document.createElement('svg')来检测，但这并不准确，因为有些不支持SVG的浏览器也能创建这个元素，只是没有SVG的核心功能。

正确的检测函数应该是这样的：

function supportsSVG() {
  // 检查是否支持命名空间，以及SVG元素是否有createSVGRect方法
  return !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect;
}

接下来看你提到的If语句语法问题，大概率是条件表达式写错了，或者语法格式不对（比如漏了括号、逻辑运算符错误）。正确的判断逻辑应该是：

// 调用检测函数，根据结果给body加class
if (supportsSVG()) {
  document.body.classList.add('svg-supported'); // 支持SVG时添加的class
} else {
  document.body.classList.add('no-svg'); // 不支持时的 fallback class
}

然后你问要不要用.innerHTML——完全不需要！.innerHTML是用来修改元素内部的HTML结构的，给body添加class属于操作元素的属性，用classList.add()是最安全、高效的方式，既不会破坏页面现有内容，也符合现代JS的最佳实践。

如果之前的代码没生效，你可以先检查这几点：

• 检测函数里有没有用createElementNS而不是createElement
• If语句的条件是否正确调用了检测函数
• 有没有在DOM加载完成后执行这段代码（比如放在DOMContentLoaded事件里，或者页面底部）

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