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

What is the best way to animate elements so that they move in a circular motion?

Creating a dynamic multi-level menu within a hamburger menu

Calling ASPX method remotely and receiving undefined data

Ways to create a noticeable effect on an image button when hovering without causing a shift in the position

Exploring the height and overflow properties of nested div elements

Initiate the video tag playback by using jquery.play() function

Header of table remains fixed as user scrolls through data, allowing for easy reference. The left

Identifying Oversized Files on Safari Mobile: A Guide to Detecting Ignored Large Files in

Creating a platform akin to YouTube for sharing videos online

After toggling the class, Jquery will no longer select the button

Incorporating text overlays on images that are compatible with responsive websites is a top priority for me

What is causing JS to malfunction and preventing App Scripts from running `doGet()` when using either `e` or `event` as parameters?

Attempting to display images in various formats using the Picture HTML element

Alter the background image of a DIV based on the selected menu item

Position a dynamic <div> in the center of the screen

Issues with displaying AngularJs directive template

Is there a way to undo the transition when hovering out?

What is the best way to horizontally align my divs and ensure they stack properly using media queries?

Tic Tac Toe is not functioning properly

Dynamic resizing in NextJs does not trigger a re-render