What is the best way to utilize a mask in an inline SVG that is compatible with Chrome browser?

Question

What is the best way to utilize a mask in an inline SVG that is compatible with Chrome browser?

I am looking to visually crop my element using an SVG shape that is defined within the same HTML file (inline SVG).

Using clip-path works perfectly:

div {
  width: 200px;
  height: 200px;
  background-color: red;
  clip-path: url("#c");
}

<div>
  <svg>
    <defs>
      <clippath id="c">
        <circle cx="100" cy="100" r="50" />
      </clippath>
    </defs>
  </svg>
</div>

However, when using a mask, Chrome does not apply any masking effect even though it works fine in Firefox:

div {
  width: 200px;
  height: 200px;
  background-color: red;
  mask: url("#m");
}

<div>
  <svg>
    <defs>
      <mask id="m">
        <circle cx="100" cy="100" r="50" fill="white" />
      </mask>
    </defs>
  </svg>
</div>

After researching (example), it appears that Chrome expects the mask to reference an entire image rather than a definition. Is there a way to refer to an entire image if it's been inlined? Or are there other methods I can try to apply a mask from an inline element?

html css svg

Answer 1

Answer №1

Discover a creative JavaScript solution that may not be the most aesthetically pleasing but gets the job done:

Capture the content of your <mask>,
Replicate it in a new SVG element _{(Chrome thankfully doesn't require width and height)},
Convert it to a data-URI and assign it to the -webkit-mask-image property.

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
const mask = document.querySelector("mask");
svg.innerHTML = mask.innerHTML;
const markup = new XMLSerializer().serializeToString(svg);
const url = `data:image/svg+xml;charset=utf8,${ encodeURIComponent(markup) }`;
const div = document.getElementById('mask-me');
div.style.webkitMaskImage = `url('${ url }')`;

#mask-me {
  width: 200px;
  height: 200px;
  background-color: red;
  /**
    This will be overidden by -webkit-mask-image even in Firefox.
    We could have avoided it with a CSS variable, e.g
    -webkit-mask-image: var(--workaround-url);
    but Safari acts in all ways as if they did support inline SVG as mask,
    when they don't.
    So, for them, we have to use the workaround everywhere...
  mask-image: url(#m);
  **/
}

<div id="mask-me">
  <svg>
    <defs>
      <mask id="m">
        <circle cx="100" cy="100" r="50" fill="white" />
      </mask>
    </defs>
  </svg>
</div>

For those requiring the mask-mode: luminance function, you'll need to implement it manually within the generated SVG image using a

<feColorMatrix type="luminanceToAlpha"/>

:

const svgNS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(svgNS, "svg");

const alpha = document.createElementNS(svgNS, "feColorMatrix");
alpha.setAttribute("type", "luminanceToAlpha");
const filter = document.createElementNS(svgNS, "filter");
filter.setAttribute("id", "alpha");
filter.append(alpha);
svg.append(filter);

const g = document.createElementNS(svgNS, "g");
g.setAttribute("filter", "url(#alpha)");

const bg = document.createElementNS(svgNS, "rect");
bg.setAttribute("width", "100%");
bg.setAttribute("height", "100%");
g.append(bg);

var mask = document.querySelector('mask').cloneNode(true);
g.append(...mask.children);
svg.append(g);

const markup = new XMLSerializer().serializeToString(svg);
const url = "data:image/svg+xml;charset=utf8," + encodeURIComponent(markup);
const div = document.getElementById("mask-me");
div.style.webkitMaskImage = `url('${ url }')`;

.border {
  display: inline-block;
  border: 1px solid;
}
#mask-me {
  width: 300px;
  height: 200px;
  background-color: red;
  /** Safari doesn't really support mask-image using inline SVG either...
    mask-image: url(#m);
    mask-mode: luminance;
  **/
}

<div id="mask-me">
  <svg width="0">
    <defs>
      <mask id="m">
        <circle cx="100" cy="100" r="50" fill="white" />
        <rect x="90" y="90" width="20" height="20" fill="black" />
      </mask>
    </defs>
  </svg>
</div>

Answer 2

Discover a creative JavaScript solution that may not be the most aesthetically pleasing but gets the job done:

Capture the content of your <mask>,
Replicate it in a new SVG element _{(Chrome thankfully doesn't require width and height)},
Convert it to a data-URI and assign it to the -webkit-mask-image property.

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
const mask = document.querySelector("mask");
svg.innerHTML = mask.innerHTML;
const markup = new XMLSerializer().serializeToString(svg);
const url = `data:image/svg+xml;charset=utf8,${ encodeURIComponent(markup) }`;
const div = document.getElementById('mask-me');
div.style.webkitMaskImage = `url('${ url }')`;

#mask-me {
  width: 200px;
  height: 200px;
  background-color: red;
  /**
    This will be overidden by -webkit-mask-image even in Firefox.
    We could have avoided it with a CSS variable, e.g
    -webkit-mask-image: var(--workaround-url);
    but Safari acts in all ways as if they did support inline SVG as mask,
    when they don't.
    So, for them, we have to use the workaround everywhere...
  mask-image: url(#m);
  **/
}

<div id="mask-me">
  <svg>
    <defs>
      <mask id="m">
        <circle cx="100" cy="100" r="50" fill="white" />
      </mask>
    </defs>
  </svg>
</div>

For those requiring the mask-mode: luminance function, you'll need to implement it manually within the generated SVG image using a

<feColorMatrix type="luminanceToAlpha"/>

:

const svgNS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(svgNS, "svg");

const alpha = document.createElementNS(svgNS, "feColorMatrix");
alpha.setAttribute("type", "luminanceToAlpha");
const filter = document.createElementNS(svgNS, "filter");
filter.setAttribute("id", "alpha");
filter.append(alpha);
svg.append(filter);

const g = document.createElementNS(svgNS, "g");
g.setAttribute("filter", "url(#alpha)");

const bg = document.createElementNS(svgNS, "rect");
bg.setAttribute("width", "100%");
bg.setAttribute("height", "100%");
g.append(bg);

var mask = document.querySelector('mask').cloneNode(true);
g.append(...mask.children);
svg.append(g);

const markup = new XMLSerializer().serializeToString(svg);
const url = "data:image/svg+xml;charset=utf8," + encodeURIComponent(markup);
const div = document.getElementById("mask-me");
div.style.webkitMaskImage = `url('${ url }')`;

.border {
  display: inline-block;
  border: 1px solid;
}
#mask-me {
  width: 300px;
  height: 200px;
  background-color: red;
  /** Safari doesn't really support mask-image using inline SVG either...
    mask-image: url(#m);
    mask-mode: luminance;
  **/
}

<div id="mask-me">
  <svg width="0">
    <defs>
      <mask id="m">
        <circle cx="100" cy="100" r="50" fill="white" />
        <rect x="90" y="90" width="20" height="20" fill="black" />
      </mask>
    </defs>
  </svg>
</div>

Answer 3

Answer №2

Recently, I discovered that Chrome does not currently offer full support for the mask property according to my findings. However, it does seem to support the use of mask-image. You can refer to this resource for more details: Browser Support - CSS Masks.

It appears that this is still the current situation regarding Chrome and the mask property.

Answer 4

Recently, I discovered that Chrome does not currently offer full support for the mask property according to my findings. However, it does seem to support the use of mask-image. You can refer to this resource for more details: Browser Support - CSS Masks.

It appears that this is still the current situation regarding Chrome and the mask property.

What is the best way to utilize a mask in an inline SVG that is compatible with Chrome browser?

Answer №1

Answer №2

Similar questions

"Angluar4 is throwing an error: it's unable to read the property 'iname' of

Is there a way to create a function that can show the pathway on the Browser Console?

Fetch real-time server information using the img src attribute

Creating a Visual Loading Effect in HTML

Steps for displaying an HTML table in Excel by clicking on a button

"Improve text visibility on your website with Google PageSpeed's 'Ensure text remains visible' feature, potentially saving you

What's preventing the buttons from shifting positions?

How to Show a GIF in ASP.NET Core 3.0 When OnPost() is Invoked

I am having issues with Tailwind CSS overriding the responsive padding on my website

Full comprehension with a width of 100%

Positioning the horizontal menu and footer links to the right side of the page

Modifying content on links that are dynamically created

Is there a way to retrieve the chosen selection from a select dropdown element using JavaScript?

Using Webflow code in ReactJS/NextJS: Best practices and implementation tips

Web pages that dynamically update without the need for reloading

Combining cells through the utilization of JavaScript

"Implementation of Google+ button causing the appearance of a horizontal scrollbar

Combine multiple jQuery click functions into a single function

Display corresponding div elements upon clicking an HTML select option

Can someone help me troubleshoot the issue I'm having with this jQuery API function?