为什么SVG路径在使用DOM接口构建时会塌陷为0x0,而在使用jQuery字符串构建时会起作用
我试图创建一个复选框,使用svg作为复选标记。我想通过DOM接口构建svg,但是当这样构建时,路径将变成0x0,因此不会显示复选标记 最初,我将svg构建为:为什么SVG路径在使用DOM接口构建时会塌陷为0x0,而在使用jQuery字符串构建时会起作用,jquery,html,css,dom,svg,Jquery,Html,Css,Dom,Svg,我试图创建一个复选框,使用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') c
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)
let svg=$(“”)
$(this.checkboxDiv).append(svg)
它起作用了
我是否错误地使用了SVGSVGElement和/或SVGPatheElement接口
可能是由于父级的显示。它被包装在一个显示为内联flex的div中,但是在dev控制台中将该值更改为block并没有解决该问题 评论是正确的: 使用传入null的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)
最后的评论也是正确的。我从viewBox、fill和path属性中删除了setAttributeNS,并启用了复选标记。似乎主要问题是将属性名称空间设置为null以外的值
非常感谢 使用
svgPathEl.setAttributeNS(null,'d','M10.32.5…)
而不是svgPathEl.setAttributeNS('shttp://www.w3.org/2000/svg“,”d“,”M10.32.5…)
我也会使用setAttributeNS作为viewBox
和fill
@enxaneta,但事实上,将setAttributeNS
中的null
作为名称空间可以正常工作:您不需要使用setAttributeNS()
。使用setAttribute(名称、值)
效果很好。对于具有命名空间的属性,只需使用setAttributeNS()
。例如xlink:href
。