Angular DomSanitizer：消毒掩码图像不起作用
Angular DomSanitizer: Sanitizing Mask-Image Not Working
为元素提供背景图片时，一切正常：
<div [style.background-image]="sanitizedStyleValue"></div>
但是如何为元素提供 mask-image？这个：
<div [style.mask-image]="sanitizedStyleValue"></div>
无效。还有
<div [ngStyle]="{ 'mask-image': 'url( mymaskimage.svg )' }"></div>
不起作用。我什至没有在控制台中收到警告。
这是因为 DomSanitizer 对蒙版图像的存在权一无所知，还是有其他方法可以实现？
上下文
我想创建一个 IconComponent，我可以在其中 Input() 一个图标名称，它将用作遮罩图像 url 的一部分。另一个 Input() 保存背景颜色。这样，我就可以用不同的颜色组合不同的图标。
我想阻止为每个可能的图标创建 CSS-类。
试试这个：-
[ngStyle]="{ 'mask-image': 'url(' + maskedImagedUrl + ')'}"
根据 the documentation，要使 CSS 掩码与 chrome 一起使用，您需要在规则前加上 -webkit-
所以这应该有效
<div [style.-webkit-mask-image]="sanitizedStyleValue"></div>
注意：根据W3C recommendations，您用于遮罩的图像必须返回正确的 CORS headers。
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.
为元素提供背景图片时，一切正常：
<div [style.background-image]="sanitizedStyleValue"></div>
但是如何为元素提供 mask-image？这个：
<div [style.mask-image]="sanitizedStyleValue"></div>
无效。还有
<div [ngStyle]="{ 'mask-image': 'url( mymaskimage.svg )' }"></div>
不起作用。我什至没有在控制台中收到警告。
这是因为 DomSanitizer 对蒙版图像的存在权一无所知，还是有其他方法可以实现？
上下文
我想创建一个 IconComponent，我可以在其中 Input() 一个图标名称，它将用作遮罩图像 url 的一部分。另一个 Input() 保存背景颜色。这样，我就可以用不同的颜色组合不同的图标。
我想阻止为每个可能的图标创建 CSS-类。
试试这个：-
[ngStyle]="{ 'mask-image': 'url(' + maskedImagedUrl + ')'}"
根据 the documentation，要使 CSS 掩码与 chrome 一起使用，您需要在规则前加上 -webkit-
所以这应该有效
<div [style.-webkit-mask-image]="sanitizedStyleValue"></div>
注意：根据W3C recommendations，您用于遮罩的图像必须返回正确的 CORS headers。
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.