使用document.createElement()时如何保留标签大小写？

我需要给SVG的<filter>元素动态插入驼峰式命名的标签（比如feDiffuseLighting），部分属性也是驼峰式。但使用document.createElement('feDiffuseLighting')创建元素时，生成的标签是全小写的<fediffuselighting>，而非预期的驼峰式。

原本以为HTML标签大小写不影响，但实际测试发现：只有在开发者工具中手动将小写标签改回驼峰式后，SVG滤镜才能正常生效。请问如何让document.createElement生成大小写正确的元素？或者有没有其他办法创建符合要求的元素？

示例代码 #

JavaScript

const diffuseLightingEl = document.createElement('feDiffuseLighting');
diffuseLightingEl.setAttribute('in', 'noise2');
diffuseLightingEl.setAttribute('lighting-color', '#ffffff');
diffuseLightingEl.setAttribute('surfaceScale', '2');

const distantLightEl = document.createElement('feDistantLight');
distantLightEl.setAttribute('azimuth', '45');
distantLightEl.setAttribute('elevation', '60');

diffuseLightingEl.appendChild(distantLightEl);
document.querySelector('#noise-filter2').appendChild(diffuseLightingEl)

CSS

body{height: 100vh;margin:0; display:flex; align-items:stretch; gap:1rem;}
body div{flex:1;}
svg{height: 100%; width: 100%;}

HTML

<div>
  <strong>手动添加的元素</strong>
  <svg>
    <filter id="noise-filter1">
      <feTurbulence stitchTiles="stitch" result="noise1" baseFrequency="0.519" numOctaves="5" type="fractalNoise" seed="0"></feTurbulence>
      <feDiffuseLighting in="noise1" lighting-color="#ffffff" surfaceScale="2">
        <feDistantLight azimuth="45" elevation="60"></feDistantLight>
      </feDiffuseLighting>
    </filter>

    <rect x="0" y="0" width="100%" height="100%" filter="url(#noise-filter1)" fill="none"></rect>
  </svg>
</div>

<div>
  <strong>动态添加的元素</strong>
  <svg>
    <filter id="noise-filter2">
       <feTurbulence stitchTiles="stitch" result="noise2" baseFrequency="0.519" numOctaves="5" type="fractalNoise" seed="0"></feTurbulence>
    </filter>

    <rect x="0" y="0" width="100%" height="100%" filter="url(#noise-filter2)" fill="none"></rect>
  </svg>
</div>

解决方案 #

问题出在SVG属于XML命名空间，普通的document.createElement是为HTML文档设计的，HTML标签不区分大小写，所以会自动将标签名转为小写。而SVG元素名称是大小写敏感的，必须使用document.createElementNS并指定SVG的命名空间http://www.w3.org/2000/svg，才能保留正确的驼峰式标签名。

修改后的JavaScript代码如下：

// 定义SVG命名空间
const svgNS = 'http://www.w3.org/2000/svg';

// 使用createElementNS创建SVG滤镜元素
const diffuseLightingEl = document.createElementNS(svgNS, 'feDiffuseLighting');
diffuseLightingEl.setAttribute('in', 'noise2');
diffuseLightingEl.setAttribute('lighting-color', '#ffffff');
diffuseLightingEl.setAttribute('surfaceScale', '2');

const distantLightEl = document.createElementNS(svgNS, 'feDistantLight');
distantLightEl.setAttribute('azimuth', '45');
distantLightEl.setAttribute('elevation', '60');

diffuseLightingEl.appendChild(distantLightEl);
document.querySelector('#noise-filter2').appendChild(diffuseLightingEl)

这样创建的元素会保持正确的驼峰式标签名，SVG渲染引擎就能正常识别并应用滤镜效果。

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