动态创建SVG（含path）元素页面不显示问题求助

核心问题：SVG命名空间与属性设置方式错误 #

动态创建SVG元素时，浏览器对SVG有特殊的解析规则，以下是常见错误及修复方案：

• 必须使用SVG命名空间创建元素
  直接用document.createElement('svg')或document.createElement('path')创建的元素，浏览器不会识别为SVG节点，导致默认样式失效、尺寸为0。
  正确写法：

  // 创建SVG根元素
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  // 创建path元素
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  

• SVG属性需用setAttribute设置
  SVG的固有属性（如d、viewBox、fill）不能通过element.style赋值，必须用setAttribute方法：

  // 设置SVG基础属性
  svg.setAttribute('width', '24');
  svg.setAttribute('height', '24');
  svg.setAttribute('viewBox', '0 0 24 24'); // 关键：确保内部元素能正确缩放
  svg.setAttribute('fill', '#000');
  
  // 设置path的路径数据
  path.setAttribute('d', 'M8 5v14l11-7z');
  

• 完整可运行示例

  // 创建SVG容器
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.setAttribute('width', '24');
  svg.setAttribute('height', '24');
  svg.setAttribute('viewBox', '0 0 24 24');
  svg.setAttribute('fill', 'currentColor');
  
  // 创建播放图标路径
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('d', 'M8 5v14l11-7z');
  
  // 组装并插入页面
  svg.appendChild(path);
  document.body.appendChild(svg);
  

内容的提问来源于stack exchange，提问作者Mircea Pavîlcu