html - Angular DomSanitizer : Sanitizing Mask-Image Not Working

Question

为元素提供背景图片时，一切正常:

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

但是我怎样才能为一个元素提供一个ma​​sk-image呢？这:

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

不工作。还有

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

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

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

上下文

我想创建一个 IconComponent，我可以在其中 Input() 一个图标名称，它将用作 mask 图像 url 的一部分。另一个 Input() 保存背景颜色。这样，我可以用不同的颜色组合不同的图标。

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

Answer 1

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

所以这应该有效

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

注意:根据W3C recommendations ，您用于掩码的图像必须返回正确的 CORS header 。

User agents must use the potentially CORS-enabled fetch method defined by the [HTML5] specification for all , and values on the mask-image, mask-border-source and clip-path properties. When fetching, user agents must use “Anonymous” mode, set the referrer source to the stylesheet’s URL and set the origin to the URL of the containing document. If this results in network errors, the effect is as if the value none had been specified.