从JS动态创建svg不适用于剪辑路径[重复]答案

【问题标题】：creating svg dynamically from JS not working for clip-path [duplicate]从JS动态创建svg不适用于剪辑路径[重复]
【发布时间】：2021-03-24 19:11:13
【问题描述】：

所以，我有这个 svg。

<svg width="0" height="0"><clippath id="4vIt5" clippathunits="objectBoundingBox"><path d="
        M 0.15, 0.15
        L 0.35,0.15
        C 0.35 0.15 0.65 0.15 0.65 0.15 
        L .85,0.15
        L 0.85,0.35
        C 0.7 0.35 0.7 0.65 0.85 0.65
        L 0.85, 0.85
        L 0.65, 0.85
        C 0.65 1 0.35 1 0.35 0.85 
        L 0.15, 0.85
        L 0.15, 0.65
        C 0.15 0.65 0.15 0.35 0.15 0.35 
        L 0.15, 0.15
        "></path></clippath></svg>

当我把它放在 html 中时（完全相同），当我将 div 链接到这个剪辑路径时，就像

clip-path: url(#4vIt5)

一切正常

但是当我使用 JS 动态创建这个 svg 喜欢

let svg = document.createElement('svg')
let clipPath = document.createElement ('clipPath')
let path = document.createElement('path')
path.setAttribute('d' `.....`)

添加它 svg 显然可以正常工作并出现在 html 文档中。我可以从检查元素中看到它。 svg 显示正确，但链接不起作用，即当我尝试将 svg id 链接到 div 时

剪辑路径：url('#id')

现在它不工作了。这怎么可能？

我已经像下面这样测试了它。

我使用检查窗口从动态创建的 svg 复制完全相同的 svg 并粘贴到 html 文档中
一切正常

问题在于动态地做同样的事情

【问题讨论】：

标签： javascript html css svg clip-path

【解决方案1】：

您需要使用createElementNS() 以便在 SVG 命名空间中创建 SVG 元素。否则它们将在默认的 HTML 命名空间中创建。

let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
let clipPath = document.createElementNS('http://www.w3.org/2000/svg', 'clipPath')
let path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
path.setAttribute('d' `.....`)

【讨论】：