CODEWITHSUNDEEP
htmlcssangulartypescriptangular-dom-sanitizer
uruk
uruk

Reputation: 1306

Angular DomSanitizer: Sanitizing Mask-Image Not Working

When providing a background image for an element, everything works fine:

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

But how can I provide a mask-image for an element? This:

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

is not working. Also

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

does not work. I don't even get a warning in the console.

Is this due to DomSanitizer's ignorance of mask images' right for existance, or is there another way to achieve this?

Context

I want to create an IconComponent where I can Input() an icon name which will be used as part of an url for the mask image. Another Input() holds the background color. This way, I can combine different icons with different colors.

I would like to prevent creating CSS-classes for every possible icon.

Upvotes: 3

Views: 1768

Answers (2)

David
David

Reputation: 34425

According to the documentation, for CSS masks to work with chrome, you need to prefix the rules with -webkit-

So this shoud work

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

Note: According to W3C recommendations, the images you are using for the mask must be returned with correct 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.

Upvotes: 2

Aakash Garg
Aakash Garg

Reputation: 10971

Try this :- 

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

Upvotes: 1

Related Questions