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

Navigate through the options on the left menu by sliding your

I'm attempting to create a menu that slides in a submenu from the left on hover, but the issue is that with this code, all submenus open instead of just the one related to the hovered link. Here is my HTML code: <ul id="NavMenu"> ...

javascriptjqueryhtmlcss

Is it expected for every element to return true when checking their visibility with isDisplayed() after performing a get() method

Why are WebDriver get() and isDisplayed() methods not functioning as expected? According to the documentation: This is done using an HTTP GET operation, and the method will block until the load is complete As seen in similar questions such as Wait fo ...

htmlasynchronousseleniumwebdriverrendering

jQuery tooltips experiencing lag or duplication when closing on adjacent elements

My tool tips are not disappearing correctly, specifically in IE where they lag after you move to the next element. Using jQuery: $(document).ready(function() { loadMap(x, y,z); $(document).tooltip({ at: 'center top', my: ...

jqueryhtml

Having trouble with jQuery and Ajax POST requests

I designed a basic html page and utilized jquery/ajax to transmit a simple json file to my php server. The behavior of my code is quite puzzling. Initially, I followed suggestions from other Stack Overflow queries: Script1 var data = {"deviceUUID":"ab ...

jqueryhtmlajaxposthttp-post

Is there a way to switch the classList between various buttons using a single JavaScript function?

I'm currently developing a straightforward add to cart container that also has the ability to toggle between different product sizes. However, I am facing difficulties in achieving this functionality without having to create separate functions for ea ...

javascriptjquerycsstoggle

concealing the date selection feature on the data picker

$('.year').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM yy', onOpen: function(dateText, inst) { $("table.ui-datepicker-calendar").addClass('hide') }, onClos ...

javascriptjquerycsscalendar

Navigating through sibling elements can be accomplished by using various methods in

Can someone help me figure out how to assign unique IDs to 6 different Div elements as I step through them? The code snippet below is not working as expected, giving all Divs the same ID. What is the correct way to accomplish this task? $('#main-slid ...

javascriptjquerycssiterationstep-through

The functionality of the anchor tag is not supported by the Safari browser on iPhone devices

Having some trouble with a named anchor tag in the iPhone Safari browser. It's functioning properly in desktop browsers, including Safari, but not working on mobile Safari. Odd! For instance, my URL appears as: http://www.example.com/my-example-arti ...

htmlcssiphonemobile-safarianchor

Container element refusing to grow in size while the footer remains fixed on the screen

Description: I recently encountered an issue with the layout of my website. I have a main content div (#main) and a container div (.display), which should expand automatically with content to push the footer down. Initially, I struggled to get this workin ...

htmlcsspositioning

What is the best way to conceal the main list but still show the nested list within?

I'm looking for a way to conceal the main parent of a sub-list while still displaying the nested list. Furthermore, I need to ensure that the parent element doesn't occupy any space on the page when hidden. HTML <ul> <li class="par ...

htmlcss

Create independent SVG files using Meteor and iron-router

My goal is to use Meteor and Iron-Router to serve dynamic SVG files with templating capabilities. To start, I create a new route: @route 'svg', { path: '/svg/:name' data: -> { name: this.params.name } # sample data layoutT ...

javascriptsvgmeteoriron-routerspacebars

Transmitting an image from an HTML file to a Node.js server

Hello, I am currently working on capturing frames from a video and converting them into images. However, I am encountering an issue when passing this image to server.js as I am unable to access it and the console shows its type as undefined. Below is the s ...

htmlnode.js

A guide on mapping an array and removing the associated element

I have an array called responseData, which is used to display the available card options on the screen. public responseData = [ { id: 1399, pessoa_id: 75898, created_at: '2022-11-08T16:59:59.000000Z', holder: 'LEONARDO ', validade: ...

javascripthtmlarraysangular

Ensuring consistent placement and scrollability of two divs across all screen sizes

I am in need of a solution to fix the top and bottom divs in the given image. The scroll should only occur when there is overflow. <!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> ...

javascriptjqueryhtmlcss

No information available at the moment

When the data is not present, it displays as "display none"... However, I want it to show "no data found" This is the current code if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].styl ...

javascripthtmlcss

Printing dynamic data

When the print button is clicked, I need to print dynamically generated data from a table that has an ID. The table data (td and tr) is dynamically generated. I have successfully retrieved the table data and attempted to print everything using window.prin ...

javascripthtmlajaxweb

What is the method for showcasing background images sequentially?

css code #intro { position: relative; background-attachment: fixed; background-repeat: no-repeat; background-position: center top; -webkit-background-size: cover; -moz-background-size: cover; backgr ...

javascriptjqueryhtmlcss

Building an easy-to-use jQuery task list

I'm currently working on a basic to-do list in Javascript, but I've encountered an issue. When I check the checkbox, the style of the adjacent text doesn't change as expected. Instead, it's the heading text that is affected by the chang ...

javascriptjqueryhtmlcss

Firefox browser does not display flashing titles for tabs

Every second, I want to display "New message..." in the title when the browser tab is inactive or the user is in another tab. Here's the code I used: <script> var mytimer; function log() { document.title = document.title == "" ...

javascriptjqueryhtml

Tips for aligning column components in a vertical position

My task is to align vertically the elements within multiple columns that include a headline, a description, and a button. By default, each element expands based on its content size https://i.stack.imgur.com/RJJP4.png However, I need all elements to be al ...

htmlcssalignmentcss-grid