Почему SVG-путь падает до 0x0 при сборке с использованием интерфейса DOM, но работает при сборке с использованием строки jQuery

Question

Я пытаюсь создать флажок, который использует svg в качестве флажка.Я хотел собрать svg через интерфейс DOM, но при сборке путь стал бы 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?

Возможно, это связано с отображением родителя.Он заключен в div, который отображается как inline-flex, однако изменение этого значения для блокировки в консоли dev не устранило проблему.

Answer 1

Комментарии были правильными:

Использование setAttributeNS с передачей нулевого значения в качестве первого параметра устранило проблему.Также используется тот же подход при создании атрибутов 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)

Последний комментарий также был верным.Я удалил setAttributeNS из viewBox, атрибуты fill и path и флажок заработал.Похоже, что основной проблемой была установка пространства имен атрибута на значение, отличное от нуля.

Большое спасибо!