html - Angular DomSanitizer：消毒面具图像不起作用

Question

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

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

但是如何为元素提供掩码图像？这个：

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

不管用。还

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

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

这是由于 DomSanitizer 不知道掩码图像的存在权，还是有其他方法可以实现这一点？

语境

我想创建一个IconComponent，我可以在其中创建一个Input()图标名称，该名称将用作遮罩图像的 url 的一部分。另一个Input()持有背景颜色。这样，我可以将不同的图标与不同的颜色组合起来。

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

Answer 1

根据文档，要使 CSS 掩码与 chrome 一起使用，您需要在规则前面加上-webkit-

所以这应该工作

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

注意：根据W3C 建议，您用于掩码的图像必须返回正确的 CORS 标头。

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

Answer 2

尝试这个 ：-

[ngStyle]="{ 'mask-image': 'url(' + maskedImagedUrl + ')'}"