使用DOMParser创建SVG时isPointInFill方法始终返回false的问题

问题原因 #

通过DOMParser解析生成的SVG节点未挂载到当前文档的DOM树中，这类脱离文档的SVG元素无法正确计算布局信息，导致getBBox()返回宽高为0，isPointInFill()也无法正确判断点是否在填充区域内。

解决方案 #

将解析后的SVG节点添加到当前文档的DOM中，再调用相关方法。修改后的代码如下：

JavaScript代码 #

const $ul = document.getElementById("list")
// 正方形SVG字符串
const svgString = `<svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 0.5H1V9.5H10V0.5Z" fill="#D9D9D9" stroke="black"/></svg>`
const parser = new DOMParser()
const doc = parser.parseFromString(svgString, 'image/svg+xml')
const svgNode = doc.children[0]

// 关键步骤：将SVG节点挂载到DOM
document.body.appendChild(svgNode)

const pathNode = svgNode.children[0]
const point = svgNode.createSVGPoint()

for (let i = 0; i <= 10; i++) {
 for (let j = 0; j <= 10; j++) {
        point.x = i;
    point.y = j;
    
    $ul.innerHTML += `<li>${i},${j} => ${pathNode.isPointInFill(point)}</li>`;
 }
}

HTML代码 #

<ul id="list"></ul>

补充说明 #

如果不想让SVG显示在页面中，可以通过CSS隐藏它，不影响API的正常调用：

svg {
  position: absolute;
  visibility: hidden;
}

SVG的布局相关API（如getBBox()、isPointInFill()）依赖元素在文档中的渲染上下文，只有当元素被添加到DOM树后，浏览器才能正确计算其边界盒和坐标空间，进而执行点是否在填充区域的判断。

内容的提问来源于stack exchange，提问作者Frnak