---
title: "How can I apply a mask from an inline SVG that can work in Chrome?"  
description: "How can I apply a mask from an inline SVG that can work in Chrome?"  
author: "Steilla Mitchel"  
published: 2023-07-21  
updated: 2023-07-21  
canonical: https://www.mindstick.com/forum/159198/how-can-i-apply-a-mask-from-an-inline-svg-that-can-work-in-chrome  
category: "google chromebook"  
tags: ["chrome seo extension"]  
reading_time: 2 minutes  

---

# How can I apply a mask from an inline SVG that can work in Chrome?

How can I [apply](https://www.mindstick.com/articles/13148/discover-to-apply-make-up-like-a-professional-supermodel) a [mask](https://answers.mindstick.com/qa/39777/who-wrote-the-man-in-the-iron-mask) from an [inline](https://www.mindstick.com/interview/1012/describe-the-difference-between-inline-and-code-behind) [SVG](https://www.mindstick.com/forum/159187/create-svg-progress-bar-to-move-anti-clockwise-using-css) that can work in [Chrome](https://www.mindstick.com/blog/303260/discover-google-s-latest-ip-protection-privacy-test-feature-in-chrome)?

## Replies

### Reply by Aryan Kumar

Here are the steps on how to apply a mask from an inline SVG that can work in Chrome:

1. Create an SVG mask element. This element will contain the path or shape that you want to use as a mask.
2. Set the `maskUnits` and `maskContentUnits` properties of the mask element to `objectBoundingBox`. This will ensure that the mask is applied to the object in the same way, regardless of its size or position.
3. Set the `id` attribute of the mask element to a unique value. This value will be used to reference the mask in the CSS.
4. Create an SVG element that you want to mask. This element can be any type of SVG element, such as a rectangle, circle, or text.
5. Set the `mask` property of the masked element to the ID of the mask element that you created in step 3.
6. Add the inline SVG code to your HTML document.

Here is an example of how you can apply a mask from an inline SVG that can work in Chrome:

HTML

```plaintext
<svg width="100px" height="100px">
  <mask id="my-mask">
    <rect x="0" y="0" width="100" height="100" fill="black" />
  </mask>
  <circle cx="50" cy="50" r="40" mask="url(#my-mask)" />
</svg>
```

In this example, we have created an SVG mask element with a black rectangle. We have then created an SVG circle element and set its `mask` property to the ID of the mask element. The result is that the circle will be masked by the black rectangle.

This technique will work in Chrome, Firefox, and most other modern browsers. However, it is important to note that some older browsers may not support SVG masks.


---

Original Source: https://www.mindstick.com/forum/159198/how-can-i-apply-a-mask-from-an-inline-svg-that-can-work-in-chrome

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.