如何为<use>标签引用的SVG <symbol>元素应用线性渐变？

问题原因 #

浏览器对url(#xxx)格式的ID引用默认限定在当前HTML文档作用域，你直接使用url(#gradient1)时，浏览器不会到外部的icons.svg文件中查找对应渐变定义，自然无法渲染生效。同时你原路径没有设置stroke和stroke-width属性，也会导致线条类图标无内容显示。

解决方案 #

方案1：直接在外部SVG文件中绑定渐变（推荐） #

修改icons.svg中icon-account的path定义，引用渐变时带上外部SVG文件的完整路径，同时补全描边属性即可：

<symbol id="icon-account" viewBox="0 0 42 42" >
  <path 
    d="M6.09091 34.3314C10.9277 29.4164 15.2241 27.245 21 27.1818C27.3352 27.4877 31.7332 29.4904 36.2727 33.9136M41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21ZM26.4545 15.1818C26.4545 18.1943 24.0125 20.6364 21 20.6364C17.9875 20.6364 15.5455 18.1943 15.5455 15.1818C15.5455 12.1694 17.9875 9.72727 21 9.72727C24.0125 9.72727 26.4545 12.1694 26.4545 15.1818Z" 
    fill="none"
    stroke="url(/icons.svg#gradient1)"
    stroke-width="2"
  />
</symbol>

注意：如果你的icons.svg不在站点根目录，需要把路径替换为对应正确的绝对/相对路径。

方案2：在CSS中控制渐变样式 #

如果需要动态切换渐变，也可以在CSS中引用带文件路径的渐变地址：

#icon-account use {
  stroke: url(/icons.svg#gradient1);
  stroke-width: 2;
}

兼容兜底方案 #

如果需要兼容老旧浏览器，可以通过JS动态加载外部SVG文件插入到页面隐藏容器中，所有ID会自动纳入当前文档作用域，不需要修改原有引用代码：

document.addEventListener('DOMContentLoaded', async () => {
  // 加载外部SVG文件
  const resp = await fetch('/icons.svg');
  const svgContent = await resp.text();
  // 创建隐藏容器插入SVG
  const hideBox = document.createElement('div');
  hideBox.style.display = 'none';
  hideBox.innerHTML = svgContent;
  document.body.appendChild(hideBox);
})

这种方式不会在HTML源码中写入SVG定义，符合你不想污染HTML代码的需求。

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