如何使用Vanilla Javascript动态创建可自定义参数的SVG元素

你的代码存在以下核心问题，调整后即可正常运行：

• SVG 属于带 XML 命名空间的元素，必须用createElementNS传入 SVG 专属命名空间创建，不能用普通createElement
• 类名赋值不能直接使用.class属性，需要用setAttribute('class', 对应值)或者.className属性实现
• 代码中yourObject.viewBox = "0 0 50 50"为笔误，应该给 SVG 元素设置 viewBox，而非给 yourObject 变量赋值
• xlink:href属于 xlink 命名空间属性，需要用带命名空间的setAttributeNS方法设置
• 注意资源路径拼写统一，你示例中的资源路径前缀为images/，测试代码里写为image/，需要和实际项目路径匹配

修正后代码（命名空间写法） #

// 固定命名空间常量
const SVG_NS = 'http://www.w3.org/2000/svg';
const XLINK_NS = 'http://www.w3.org/1999/xlink';
// 可替换为 rock/paper/scissor 任意值
const yourObject = 'paper';

// 创建svg根元素
const yourSVG = document.createElementNS(SVG_NS, 'svg');
yourSVG.setAttribute('class', yourObject);
yourSVG.setAttribute('id', yourObject);
yourSVG.setAttribute('viewBox', '0 0 50 50');

// 创建内部image元素
const yourImage = document.createElementNS(SVG_NS, 'image');
yourImage.setAttribute('width', '50');
yourImage.setAttribute('height', '50');
yourImage.setAttributeNS(XLINK_NS, 'href', `images/icon-${yourObject}.svg`);

// 插入到页面容器
yourSVG.appendChild(yourImage);
document.getElementById('your-object-div').appendChild(yourSVG);

简化方案（innerHTML写法） #

如果不想处理命名空间逻辑，也可以直接用字符串拼接实现，写法更简洁：

// 可替换为 rock/paper/scissor 任意值
const yourObject = 'paper';
document.getElementById('your-object-div').innerHTML = `
<svg class="${yourObject}" id="${yourObject}" viewBox="0 0 50 50">
  <image width="50" height="50" xlink:href="images/icon-${yourObject}.svg"/>
</svg>
`;

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