Angular DomSanitizer：消毒遮罩图像不起作用

为元素提供背景图像时，一切正常：

<div [style.background-image]="sanitizedStyleValue"></div>

但我怎样才能提供掩模图像对于一个元素？这：

<div [style.mask-image]="sanitizedStyleValue"></div>

不管用。还

<div [ngStyle]="{ 'mask-image': 'url( mymaskimage.svg )' }"></div>

不起作用。我什至没有在控制台中收到警告。

这是由于 DomSanitizer 对蒙版图像的存在权一无所知，还是有其他方法可以实现这一点？

Context

我想创建一个图标组件我可以在哪里Input()图标名称，将用作遮罩图像 URL 的一部分。其他Input()保存背景颜色。这样，我可以将不同的图标与不同的颜色组合起来。

我想阻止为每个可能的图标创建 CSS 类。

根据文档 https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image#Browser_compatibility，要使 CSS mask 能够与 chrome 一起使用，您需要在规则前加上前缀-webkit-

所以这应该有效

<div [style.-webkit-mask-image]="sanitizedStyleValue"></div>

Note： 根据W3C 建议 https://www.w3.org/TR/css-masking-1/#security，您用于掩码的图像必须使用正确的 CORS 标头返回。

用户代理必须对 mask-image、mask-border-source 和 Clip-path 属性上的所有 和 值使用 [HTML5] 规范定义的可能启用 CORS 的获取方法。获取时，用户代理必须使用“匿名”模式，将引用来源设置为样式表的 URL，并将来源设置为包含文档的 URL。如果这导致网络错误，则效果就像没有指定值一样。