jquery - 为什么使用 DOM 接口(interface)构建时 SVG 路径会折叠为 0x0，但使用 jQuery 字符串构建时却有效

Question

我正在尝试创建一个使用 svg 作为复选标记的复选框。我想通过 DOM 界面构建 svg，但是当这样构建时，路径将变为 0x0，因此不会显示复选标记。

最初我将 svg 构建为:

let checkboxSvgEl: SVGSVGElement = 
    document.createElementNS('http://www.w3.org/2000/svg', 'svg')

checkboxSvgEl.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
checkboxSvgEl.setAttribute('viewBox', '0 0 12 10')
checkboxSvgEl.setAttribute('fill', 'none')

checkboxSvgEl.classList.add('ml-checkbox__check-icon')

let svgPathEl: SVGPathElement = 
    document.createElementNS('http://www.w3.org/2000/svg', 'path')

svgPathEl.setAttributeNS('http://www.w3.org/2000/svg', 'd', 'M10.32.5L12 2.086 4.164 9.5 0 5.562l1.68-1.586 2.484 2.34L10.32.5z')

svgPathEl.setAttribute('fill', '#ffffff')

checkboxSvgEl.append(svgPathEl)
this.checkboxDiv.append(checkboxSvgEl)

这不起作用，但是当 svg 创建为

let svg = $('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 10" fill="none" class="ml-checkbox__check-icon"><path d="M10.32.5L12 2.086 4.164 9.5 0 5.562l1.68-1.586 2.484 2.34L10.32.5z" fill="#ffffff"></path></svg>')

$(this.checkboxDiv).append(svg)

它有效。

我是否错误地使用了 SVGSVGElement 和/或 SVGPathElement 接口(interface)？

这可能与父级的显示有关。它被包装在一个显示为 inline-flex 的 div 中，但是在开发控制台中将该值更改为 block 并没有解决问题。

Answer 1

评论正确:

使用 setAttributeNS 传入 null 作为第一个参数解决了该问题。创建 viewBox 和 fill 属性时也使用相同的方法。

编辑后的代码:

let checkboxSvgEl: SVGSVGElement document.createElementNS('http://www.w3.org/2000/svg', 'svg')

checkboxSvgEl.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
checkboxSvgEl.setAttributeNS(null, 'viewBox', '0 0 12 10')
checkboxSvgEl.setAttributeNS(null, 'fill', 'none')

checkboxSvgEl.classList.add('ml-checkbox__check-icon')

let svgPathEl: SVGPathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path')

svgPathEl.setAttributeNS(null, 'd', 'M10.32.5L12 2.086 4.164 9.5 0 5.562l1.68-1.586 2.484 2.34L10.32.5z')           
svgPathEl.setAttribute('fill', '#ffffff')

checkboxSvgEl.append(svgPathEl)
this.checkboxDiv.append(checkboxSvgEl)

最后的评论也是正确的。我从 viewBox、fill 和 path 属性中删除了 setAttributeNS，并且复选标记起作用了。看来主要问题是将属性命名空间设置为 null 以外的值。

非常感谢!