using an SVG mask declared in HTML to apply masking

I've been experimenting with masking using an SVG shape that I created in the HTML content. I've tried various options:

  • mask, -webkit-mask
  • mask-image, -webkit-mask-image
  • different MaskUnits and MaskContentUnits
  • mask-type: luminance or not

Despite my efforts, I can't seem to get it to work properly. I must be missing something obvious.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"><
        <title>Mask with SVG</title><
        <link rel="stylesheet" href="/style.css" /><
    <style>
        .testMask {
            -webkit-mask-image: url(#torch);
            mask-image:url(#torch);
        }
    </style><
</head><
<body><
   <svg width="0" height="0"><
        <defs><
            <mask id="torch"><
                <circle cx="0.5" cy="0.5" r="0.1" fill="white" /><
            </mask><
        </defs><
    </svg><
    <div id="mainPage"><
        <img src="/img/Japan.jpg" class="testMask"><
    </div><
</body><

Do you see any issues in this code snippet? Additionally, is there a way to dynamically change the mask coordinates with JavaScript? I'm looking to have it follow the mouse pointer.

Thank you!

htmlcsssvgmask

Answer №1

By default, the units for content elements within a mask are set to objectBoundingBox (i.e. 

maskContentUnits="objectBoundingBox"
). This means that the coordinates used in the elements of the mask are relative to the bounding box. In simpler terms, (0,0) represents the top left corner and (1,1) represents the bottom right corner.

If your circle is positioned at (50,50), it will be far outside the boundaries of the mask.

To ensure consistency, it's recommended to stick with objectBoundingBox units. You can use the following code instead:

<mask id="torch" >
    <circle cx="0.5" cy="0.5" r="0.1" fill="white" />
</mask>

Please note:

Masking with inline SVG works on Firefox (view example here), but not on Chrome. For cross-browser compatibility, consider using an external image as the mask. This image can be either SVG or PNG, among others.

For instance:

.testMask {
    mask: url(mask.svg);
}

Here, mask.svg would contain:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1">
    <circle cx=".5" cy=".5" r=".35" fill="white" />
</svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Various HTML tables display varying column widths even when utilizing the same colgroup settings

I'm facing an issue with multiple HTML tables on a single page, each following this structure: H2 Header Table H2 Header Table H2 Header Table My requirement is to have all tables occupy 100% width, with columns set at widths of 50%, 30%, and 20%. I ...

htmlcsstwitter-bootstrap

I'm encountering an issue trying to launch bigbluebutton HTML5. I attempted to initiate it using "npm start" after installing it with "meteor npm install," but unfortunately, it failed to

I've been attempting to launch the Development environment for bigblubutton-html5, but unfortunately, I encountered an error message after executing this command: npm start Please refer to the tutorial I used: Here's the error message that was ...

htmlnpmmeteorbigbluebutton

Tool to track character limits in multiple text fields

I'm facing a challenge with a form that includes 3 text areas, a copy button, and a reset button. My goal is to concatenate all the characters in the text areas to get a sum which will be displayed next to the copy/reset button. The character limit is ...

javascripthtmlformscounter

Tips for inserting HTML into elements using Angular

Recently, I delved into Angular and decided to experiment with Ajax by fetching a document to display on my webpage. The process worked flawlessly, but now I face a new challenge: injecting HTML content into a DOM element dynamically. Typically, this task ...

javascripthtmlangularjs

Leverage object properties as data table field values in VueJS

In my current project, I am utilizing VueJS (version 2.5.9) to display and modify data tables within an administrative application. Initially, I used a basic Grid component for the data table, following an example provided here. However, I came across an e ...

javascripthtmlvue.jsvuejs2vue-data-tables

Design a navigation bar that seamlessly incorporates an image

I am struggling to achieve a seamless header design that flows from the logo. I have experimented with aligning images within containers and using long background images, but neither method has yielded satisfactory results. Is there a reliable way to cre ...

css

What are some strategies for keeping the focus state on the parent item in a dropdown menu?

When I interact with the dropdown menu in my navigation bar, the color changes for the child items. How can I make sure that the parent item maintains the same colored background even after clicking elsewhere on the page? To better understand the issue, i ...

htmlcss

Interacting with a JavaScript button using C# WebBrowser

Can someone please assist me with a problem I'm facing? I have a webpage coded in HTML and Javascript. Whenever I use webBrowser1.Document.GetElementById("hmenu").InvokeMember("click");, the menu pops up on my screen. However, I am unsure how to cli ...

c#javascripthtmlbrowser

Convert a solo row into individual columns within a grid format

My goal is to design a grid layout where each row can be divided into columns independently, similar to the example shown below: https://i.stack.imgur.com/VFPFq.png Here's the code snippet I have been experimenting with: .container { position ...

htmlcsscss-grid

What is the best method to choose the initial offspring of the primary brother or sister within a list item?

Is there a way to specifically target the nested li elements in my css selector? Check out the Demo li:first-child { background-color: rgb(236, 236, 236); list-style-type: none; margin-bottom: 3px; padding: 8px; } <ul> <li& ...

csssiblings

Is there a method, like using jQuery, to insert `<br>` tags into each line of a dropdown select list?

I need help with implementing a select tool in a limited horizontal space with each line containing a lot of information. I attempted to embed a tag into the line but it didn't work. Are there any solutions available that could provide a simple fix ...

jqueryhtmlcssajax

Tips for Creating a Responsive Homepage

I'm new to CSS and trying to create a responsive design for mobile IE. Currently, the page appears blank on IE but works fine on Google Chrome and other browsers :-) Here are the code snippets I have used: HTML: <div class="main"> <div ...

htmlcss

Learn how to incorporate a 'Select All' feature as the primary choice in DevExtreme SelectBox with Angular 15 through Html coding

We are looking to replicate the following basic HTML select in Angular 15 using a dropdown control from DevExpress known as dx-select-box <select ng-model="selectedVal" ng-change="selectedValueChanged()"> <option value=&q ...

htmlangularselectdevexpressdevextreme-angular

The placeholder is invisible

After thoroughly researching this topic, I am still stumped as to why my Placeholder is not appearing. I would greatly appreciate any insights or expertise you can provide to help me understand what I might be doing incorrectly. <input type="text" name ...

htmlcsswebplaceholder

Problem with CSS animations in IE10

I've encountered a problem with a specific section of a website I created. This section functions perfectly on all browsers and older versions of Internet Explorer, but not on the latest versions. It seems that IE no longer supports [IF] statements in ...

htmlcssanimationfadeinternet-explorer-11

Incorporate my personalized CSS file into the Bootstrap 4 development tools

Is it possible to customize Bootstrap 4 variables with build tools as outlined in this guide? I am wondering how I can create a separate CSS file named MyCustomStyles.css at the end of the build process by running npm build dist. I have created a _MyCusto ...

cssnpmbootstrap-4

The E.js Template encountered an error with an unexpected token "else"

I am in the process of creating a website quickly using e.js & Express. However, I am encountering some problems when trying to use an if-else statement within e.js tags. The if statement works fine, but as soon as I add an else statement, things start t ...

javascripthtmlcssexpressejs

After closing, the position of the qtip2 is being altered

I've successfully integrated the qtip2 with fullcalendar jQuery plugin, which are both amazing tools. However, I'm encountering an issue with the positioning of the qtip. Here's the code snippet I'm using: $(window).load(function() { ...

javascriptjquerycssqtip2

Evaluate the user's answers to a database using a SQLite 3 C++ Quiz

Currently, I am in the process of writing a C++ program that utilizes SQLite. The main aim is to enable users to specify their preferred hotel room options. Subsequently, the program compares these user selections with the information stored in a database. ...

htmlc++sqlite

Trouble Encountered with AngularJS ng-bind-html and Text not Wr

I am facing an issue with a table cell containing very lengthy text. While the text displays properly in edit mode, it overflows and does not adhere to the width of the cell when not in edit mode. I even tried removing it from ng-bind-html, but the problem ...

htmlangularjstwitter-bootstrap