JavaScript动态添加SVG填充图案：代码存在但无法显示的问题

你直接用字符串插入<pattern>的方式行不通，原因是SVG元素属于XML命名空间，直接插字符串的话，浏览器会把它当成普通HTML元素创建，而非SVG专用的<pattern>元素，导致SVG渲染引擎无法识别。

正确的做法是用SVG专属命名空间创建元素：

• 用document.createElementNS()创建所有SVG相关元素，命名空间固定为http://www.w3.org/2000/svg
• 推荐把<pattern>放到SVG的<defs>标签里（这是SVG规范中存放可复用元素的标准位置）
• 必须给<pattern>设置width、height和patternUnits属性，否则图案没有尺寸，无法正常显示

示例代码：

// 获取SVG根元素
const svg = document.getElementById('svg');

// 创建defs容器（如果SVG里没有的话）
let defs = svg.querySelector('defs');
if (!defs) {
  defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
  svg.prepend(defs);
}

// 创建pattern元素
const pattern = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
pattern.setAttribute('id', 'pat');
pattern.setAttribute('width', '100');
pattern.setAttribute('height', '100');
pattern.setAttribute('patternUnits', 'userSpaceOnUse');

// 创建image元素
const img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
img.setAttribute('href', 'test.jpg');
img.setAttribute('width', '100');
img.setAttribute('height', '100');

// 组装并添加元素
pattern.appendChild(img);
defs.appendChild(pattern);

额外注意：如果你的填充目标元素是提前写好的，需要确保它的fill="url(#pat)"属性在pattern创建后生效，或者动态更新该元素的fill属性。

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