jquery - 为什么使用 DOM 接口构建时 SVG 路径折叠为 0x0,但在使用 jQuery 字符串构建时有效
问题描述
我正在尝试创建一个使用 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 接口?
可能它必须与父母的显示有关。它被包裹在一个显示为 inline-flex 的 div 中,但是在开发控制台中将该值更改为 block 并不能解决问题。
解决方案
评论是正确的:
使用传入 null 作为第一个参数的 setAttributeNS 解决了该问题。在创建 viewBox 和填充属性时也使用相同的方法。
编辑代码:
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、填充和路径属性中删除了 setAttributeNS,并且复选标记起作用。似乎主要问题是将属性命名空间设置为 null 以外的值。
非常感谢!
推荐阅读
- r - 为没有 DOI 的学术论文创建具有不同引用风格的格式化参考文献
- c# - 如何将 Task.Run 中的事件编组回 UI 线程?
- reactjs - React & Material-UI 分页 - 将 Material-UI 的组件连接到 React-Router
- php - php 从 php 文件中读取行并按顺序对它们进行分组
- sql - 将 SQL SELECT 查询转换为 DELETE 查询
- c++ - 具有 0 个参数的函数 - void 与 void*?
- powershell - 向 Invoke-Expression 提交参数
- firebase - 如何在 orderBy 之后获取特定索引处的文档
- java - Java 使用 AWT 列表和套接字在聊天室中发送直接消息
- unreal-engine4 - IntelliSence 的虚幻引擎 4 问题