Angular应用通过mask-image引入SVG图标时部分图标显示异常

使用CSS mask-image 加载外部SVG文件时，只要SVG内部存在带ID引用的元素（比如你失效案例里的clip-path="url(#clip0_1237_8532)"，渐变、蒙版、滤镜这类依赖ID引用的资源也会触发同类问题），就会出现引用失效：这类相对锚点默认会指向当前加载的HTML文档的DOM树，不会去找SVG文件内部定义的对应ID，裁剪路径找不到自然就渲染异常。
能正常显示的那个SVG没有任何<defs>定义的内部资源，所有路径都是直接绘制的，不存在ID引用，所以不会触发这个问题。

方案1：导出时合并路径，移除内部ID引用（推荐） #

这是最稳定的处理方式，从Figma导出SVG时，在导出设置里勾选「轮廓化描边」「合并所有路径」「简化路径」选项，不要保留裁剪、蒙版、滤镜这类特殊结构，导出的SVG只保留基础<path>元素，不管是用作mask还是直接引用都不会出兼容问题。
针对你现在失效的这个图标，手动修改也很简单：直接删掉<g clip-path="url(#clip0_1237_8532)">的包裹标签、整块<defs>定义代码，只保留两个<path>元素即可，这个裁剪框本来就完全覆盖内部的白色图标路径，删掉不影响最终显示效果。

方案2：补全内部引用的完整路径 #

如果不想修改SVG导出结构，可以打开出问题的SVG文件，把所有内部url(#xxx)格式的引用，改成带SVG自身访问路径的完整地址。比如你的CSS里引用这个SVG的路径是../../../assets/images/grid/info.svg，就把原来的：

<g clip-path="url(#clip0_1237_8532)">

修改为：

<g clip-path="url('../../../assets/images/grid/info.svg#clip0_1237_8532')">

路径和CSS里的引用保持一致，浏览器就能正确定位到SVG内部定义的裁剪资源。

方案3：将SVG内联到CSS中 #

如果图标数量不多，可以直接把SVG转义为data URI内联到mask属性里，不存在跨文件引用的问题，示例写法：

.dx-icon-info {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='30' viewBox='0 0 31 30'%3E%3Cpath d='M30.4406 15C30.4406 23.0097 23.9479 29.5005 15.9414 29.5005C7.93495 29.5005 1.44219 23.0097 1.44219 15C1.44219 6.99034 7.93495 0.499469 15.9414 0.499469C23.9479 0.499469 30.4406 6.99034 30.4406 15Z' fill='%23586BA4' stroke='%23586BA4'/%3E%3Cpath d='M16 7.66406C11.86 7.66406 8.5 11.0241 8.5 15.1641C8.5 19.3041 11.86 22.6641 16 22.6641H22C22.825 22.6641 23.5 21.9891 23.5 21.1641V15.1641C23.5 11.0241 20.14 7.66406 16 7.66406ZM16 21.1641C13.8325 21.1641 11.9275 20.0091 10.8775 18.2841L13.09 16.0716L15.5575 18.1641L19 14.7291V15.9141H20.5V12.1641H16.75V13.6641H17.935L15.475 16.1241L13 14.0391L10.2325 16.8141C10.0825 16.2891 10 15.7341 10 15.1641C10 11.8566 12.6925 9.16406 16 9.16406C19.3075 9.16406 22 11.8566 22 15.1641C22 18.4716 19.3075 21.1641 16 21.1641ZM21.625 21.5391C21.2125 21.5391 20.875 21.2016 20.875 20.7891C20.875 20.3766 21.2125 20.0391 21.625 20.0391C22.0375 20.0391 22.375 20.3766 22.375 20.7891C22.375 21.2016 22.0375 21.5391 21.625 21.5391Z' fill='white'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='30' viewBox='0 0 31 30'%3E%3Cpath d='M30.4406 15C30.4406 23.0097 23.9479 29.5005 15.9414 29.5005C7.93495 29.5005 1.44219 23.0097 1.44219 15C1.44219 6.99034 7.93495 0.499469 15.9414 0.499469C23.9479 0.499469 30.4406 6.99034 30.4406 15Z' fill='%23586BA4' stroke='%23586BA4'/%3E%3Cpath d='M16 7.66406C11.86 7.66406 8.5 11.0241 8.5 15.1641C8.5 19.3041 11.86 22.6641 16 22.6641H22C22.825 22.6641 23.5 21.9891 23.5 21.1641V15.1641C23.5 11.0241 20.14 7.66406 16 7.66406ZM16 21.1641C13.8325 21.1641 11.9275 20.0091 10.8775 18.2841L13.09 16.0716L15.5575 18.1641L19 14.7291V15.9141H20.5V12.1641H16.75V13.6641H17.935L15.475 16.1241L13 14.0391L10.2325 16.8141C10.0825 16.2891 10 15.7341 10 15.1641C10 11.8566 12.6925 9.16406 16 9.16406C19.3075 9.16406 22 11.8566 22 15.1641C22 18.4716 19.3075 21.1641 16 21.1641ZM21.625 21.5391C21.2125 21.5391 20.875 21.2016 20.875 20.7891C20.875 20.3766 21.2125 20.0391 21.625 20.0391C22.0375 20.0391 22.375 20.3766 22.375 20.7891C22.375 21.2016 22.0375 21.5391 21.625 21.5391Z' fill='white'/%3E%3C/svg%3E") !important;
  height: 100%;
  width: 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
  color: $iconsBlue !important;
}

内联后不存在跨文件资源查找的问题，所有SVG结构都能正常渲染。

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