使用JavaScript动态添加SVG Sprite的use元素失败问题求助

修正后的完整代码 #

JavaScript 部分

// 让Parcel处理Sprite路径，获取编译后的正确URL
import iconsUrl from './img/icons.svg';

function createSvg(el) {
  const svgElements = ['up2', 'down3'];

  svgElements.forEach(iconId => {
    // 创建SVG容器元素，必须设置尺寸和viewBox
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.classList.add('country-list__svg');
    svg.setAttribute('width', '18');
    svg.setAttribute('height', '18');
    // 此处viewBox要与你Sprite内图标的viewBox一致，示例为24x24，需自行调整
    svg.setAttribute('viewBox', '0 0 24 24');

    // 创建use元素，使用SVG命名空间和正确的资源路径
    const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
    use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `${iconsUrl}#${iconId}`);
    use.setAttribute('href', `${iconsUrl}#${iconId}`); // 兼容新SVG规范

    svg.appendChild(use);
    el.appendChild(svg);

    // 添加点击旋转事件
    svg.addEventListener('click', () => {
      svg.classList.toggle('rotate-icon');
    });
  });
}

CSS 部分

.country-list__svg {
  color: #333; /* 控制图标填充色，通过currentColor继承 */
  cursor: pointer;
  transition: transform 0.3s ease; /* 旋转过渡动画 */
}

/* 让图标继承父元素的color作为填充色 */
.country-list__svg use {
  fill: currentColor;
}

/* 旋转效果类 */
.rotate-icon {
  transform: rotate(180deg);
}

关键问题解决说明 #

1. Parcel路径问题修复
   Parcel编译会对资源文件重命名并调整路径，直接写相对路径会失效。通过import iconsUrl from './img/icons.svg'让Parcel自动处理路径，获取编译后的正确URL，确保动态生成的use元素能找到Sprite文件。

2. SVG视口设置
   动态创建的SVG容器必须设置width、height和viewBox，否则浏览器无法确定图标显示区域，会出现0x0的情况。viewBox需与Sprite内对应图标的视口一致，保证图标能正确缩放。

3. SVG命名空间使用
   创建SVG相关元素（svg、use）时，必须使用SVG专属命名空间http://www.w3.org/2000/svg，否则浏览器无法正确识别这些元素，导致渲染失败。同时兼容新旧规范的href属性，提升浏览器兼容性。

4. CSS修改填充色实现
   确保Sprite内的图标没有硬编码fill属性，然后给use元素设置fill: currentColor，这样只需修改父SVG的color属性，就能通过CSS控制图标填充色。

5. 点击旋转交互实现
   通过给SVG元素添加点击事件，切换自定义类名rotate-icon，配合CSS的transform: rotate(180deg)实现旋转效果，添加过渡动画让交互更流畅。

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