Chrome中CSS引用外部SVG路径资源不生效，有无可行解决方案？

兼容解决方案 #

• 方案1：将SVG定义内联到HTML页面
  Chrome对CSS引用外部SVG资源的标识符支持存在缺陷，最稳妥的全兼容方案是把SVG的定义块直接嵌入HTML文档中，设置隐藏属性不占用页面空间：

<!-- 放在body起始位置，隐藏不显示 -->
<svg style="display:none" version="2.0">
  <defs>
    <clipPath id="myClip">
      <!-- 这里放原defs.svg里的裁剪路径定义 -->
    </clipPath>
    <g id="icon-1">
      <!-- 这里放原defs.svg里的图标路径定义 -->
    </g>
  </defs>
</svg>

<!-- 调用方式不变，不需要引用外部文件 -->
<svg viewBox="0 0 100 100">
   <use href="#icon-1"></use>
</svg>

CSS调用也直接用内部锚点即可，Chrome、Firefox均支持：

clip-path: url(#myClip);

• 方案2：保留外部SVG文件，用JS动态注入页面
  如果确实需要拆分SVG资源到独立文件，可以通过JavaScript异步加载外部SVG后注入到页面隐藏区域，兼容逻辑和内联方案一致：

fetch('defs.svg')
  .then(res => res.text())
  .then(svgText => {
    const div = document.createElement('div');
    div.style.display = 'none';
    div.innerHTML = svgText;
    document.body.prepend(div);
  });

加载完成后即可正常用内联锚点的方式调用SVG内的定义。

• 方案3：clip-path场景直接内联路径
  如果仅需要实现裁剪效果，不需要复用多段SVG定义，可以直接把路径写在clip-path属性中，所有主流浏览器均支持该写法：

/* 引号内替换为你自己的路径字符串 */
clip-path: path('M10 10 H 90 V 90 H 10 Z');

额外兼容提示 #

可以移除废弃的xlink:href属性，直接使用SVG2标准的href属性即可，目前所有主流浏览器均已支持该写法，可减少冗余代码。

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