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

Я пытаюсь создать флажок, который использует 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, однако изменение этого значения на блокировку в консоли разработчика не решило проблему.

Используйте svgPathEl.setAttributeNS(null, 'd', 'M10.32.5...') вместо svgPathEl.setAttributeNS('http://www.w3.org/2000/svg', 'd', 'M10.32.5...') Также я бы использовал setAttributeNS для viewBox и fill

enxaneta 22.05.2019 16:14

@enxaneta опередил меня, но действительно, он будет отлично работать с null в качестве пространства имен в setAttributeNS: jsfiddle.net/g5c7dxa2

pawel 22.05.2019 16:19

Вам не нужно использовать setAttributeNS(). Использование setAttribute(name, value) работает просто отлично. Вам нужно использовать setAttributeNS() только для атрибутов с пространством имен. Например xlink:href.

Paul LeBeau 22.05.2019 19:05
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
2
3
719
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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)

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

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

Другие вопросы по теме