In Firefox, the scaling of svg masks is not functioning properly

Trying to utilize an svg for masking an image, but encountering scaling issues in Firefox. Safari and Chrome seem to display correctly, with proper fallbacks for IE.

Website:

SVG File:

CSS:

-webkit-mask: url("../img/feelfilms-logo.svg#logo_mask");
mask: url("../img/feelfilms-logo.svg#logo_mask");
-webkit-mask-image: url(../img/feelfilms-logo.svg) top left / cover;
background-color: #d01d38;
background-blend-mode: multiply;
background-position: 50% 50%;
-webkit-background-size: cover;
background-size: cover;

Desired appearance...

Any suggestions on how to resolve the issue?

Link to SVG on pastebin: http://pastebin.com/Va5Kb8dU

csssvgscalemask

Answer №1

Need help calculating your points to the ratio versions? Check out this handy calculator:

Once you use the calculator, your svg paths should look like this:

<svg version="1.1" id="Ebene_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 246.059 217.445" enable-background="new 0 0 246.059 217.445" xml:space="preserve">

    <defs>
        <mask id="logo_mask2" maskContentUnits="objectBoundingBox" maskUnits="objectBoundingBox">

            <path fill="#FFFFFF" d="M0.4998801100549055,0.8250053848873644c-0.21133142864109827,0-0.38608626386354494-0.1706907692870409-0.38608626386354494-0.38608626386354494h-0.016256263741622944c0,0.2235236264473155,0.1788189011578524,0.40234252760516787,0.4064065935405736,0.40234252760516787c0.2235236264473155,0,0.4064065935405736-0.1788189011578524,0.4064065935405736-0.40234252760516787h-0.016256263741622944C0.8859663739184505,0.6502505496649178,0.7112115386960038,0.8250053848873644,0.4998801100549055,0.8250053848873644z,,0.8250053848873644c-0.21133142864109827,0-0.38608626386354494-0.1706907692870409-0.38608626386354494-0.38608626386354494h-0.016256263741622944c0,0.2235236264473155,0.1788189011578524,0.40234252760516787,0.4064065935405736,0.40234252760516787c0.2235236264473155,0,0.4064065935405736-0.1788189011578524,0.4064065935405736-0.40234252760516787h-0.016256263741622944C0.8859663739184505,0.6502505496649178,0.7112115386960038,0.8250053848873644,0.4998801100549055,0.8250053848873644z"/>

        </mask>
    </defs>
</svg>

(before: 

<path d="M123.274,203.551c-52.442,0-95.107-42.662-95.107-95.098h-4.893c0,55.139,44.858,99.991,100,99.991
c55.142,0,100-44.852,100-99.991h-4.893C218.381,160.889,175.713,203.551,123.274,203.551z"/>

)

Remember to include the 'maskContentUnits="objectBoundingBox"' as Robert Longson suggested in his comment; otherwise, it may not display correctly. It's also advisable to add a fill for the path in Firefox (e.g., fill="#FFFFFF" - color doesn't matter). Chrome does not seem to require this.

Answer №2

If you're looking for the calculator, it's now available again on my website:

Here is a practical example (works best on Firefox)

#test {
  width: 100%;
  height: auto;
  mask: url(#m1);
}
<svg x="0px" y="0px" width="250px" height="250px" viewBox="0 0 250 250">
  <defs>
    <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <path style="fill-rule:evenodd;clip-rule:evenodd;fill:#ffffff;" d="M0.796,0L0.172,0.004C0.068,0.008,0.008,0.068,0,0.172V0.824c0,0.076,0.06,0.16,0.168,0.172h0.652c0.072,0,0.148-0.06,0.172-0.144V0.14C1,0.06,0.908,0,0.796,0zM0.812,0.968H0.36v-0.224h0.312v-0.24H0.36V0.3h0.316l0-0.264l0.116-0c0.088,0,0.164,0.044,0.164,0.096l0,0.696C0.96,0.912,0.876,0.968,0.812,0.968z"
      />
    </mask>
  </defs>
</svg>

<img src="https://placebear.com/g/200/200" id="test" alt="">

How Does It work: The calculator divides dimensions obtained from SVG path by the SVG width (or Height, always use highest as your input), and then displays the output.

Example:

M199.468,0L43.883,1.317C17.289,2.632,2.66,17.106,0,43.423V206.58c0,19.738,15.958,40.789,42.552,43.42
    h163.563c18.619,0,37.235-15.788,43.885-36.84V35.526C250,15.89,227.399,0,199.468,0z M203.456,242.105H90.424v-56.578h78.458
    v-60.526H90.424V75.001h79.787l0.032-66.524l29.961-0.106c22.944,0,41.511,11.853,41.511,24.903l0.304,174.624
    C240.691,228.949,219.415,242.105,203.456,242.105z

is equal to (responsive result):

M0.796,0L0.172,0.004C0.068,0.008,0.008,0.068,0,0.172V0.824c0,0.076,0.06,0.16,0.168,0.172h0.652c0.072,0,0.148-0.06,0.172-0.144V0.14C1,0.06,0.908,0,0.796,0zM0.812,0.968H0.36v-0.224h0.312v-0.24H0.36V0.3h0.316l0-0.264l0.116-0c0.088,0,0.164,0.044,0.164,0.096l0,0.696C0.96,0.912,0.876,0.968,0.812,0.968z

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

What is the best way to position the sign-in modal form on the top right corner of my website?

Hey there, I'm facing a bit of an issue and can't seem to figure out what went wrong. Recently, I inserted a Bootstrap Sign In modal in my HTML file. Here's the code: <div class="text-center"> <a href="" class ...

htmlcssbootstrap-4layoutfrontend

Modifying the color scheme of Bootstrap

In order to simplify referencing, I am establishing new theme colors as shown below, allowing me to use classes like bg-red instead of bg-danger or text-purple, and so forth. $primary : #24305e; $blue : #375abb; $indigo : #796eff; ...

csstwitter-bootstrapsass

JavaScript to toggle the visibility of elements when they move outside of a specified container

Check out this js+html/css project I worked on: http://jsfiddle.net/A1ex5andr/xpRrf/ It functions as intended - opening and closing with the use of .advSearch-btn to open/close, and .advSearch-control .canc to close. However, I am facing an issue where it ...

javascriptjqueryhtmlcss

Creating a p5.js circle on top of an HTML image: A step-by-step guide

Currently, I am integrating an image into my web application using standard JavaScript and HTML. The image represents a basic map, and my objective is to utilize p5.js to draw on it. <div id="map"> <img src="Assets/MENA.jpg" ...

javascripthtmlcssp5.js

Equalizing the width of the border to match the width of the text

After designing a menu using a website builder with custom CSS, I found that the HTML code generated automatically by the builder needed some tweaking. Upon inspecting the code, I discovered the following structure: <div class="elementor-container elem ...

jqueryhtmlcss

Attempting to align navigation bar in the middle of the page

I'm facing some issues with centering the navigation bar on my website. I attempted to use a wrapper div to center it, but unfortunately, it didn't work out as expected. The only thing that seems to be working within that div is adjusting the lef ...

htmlcssnavigationcenter

Beginner attempting to comprehend Safari CSS font-size test outcomes

Currently, I am delving into the realm of CSS. To test my skills, I am making edits to an HTML file and previewing the outcome in Safari V11.0. My objective is to present an online version of a traditional printed report, complete with fixed columns and a ...

cssfontssafari

`The logo does not dim when the popup is displayed`

I'm currently experiencing an issue with pop-ups on my page - when they appear, they create a shade over all elements of the page except for my two logos and are displayed with a border around them. Here's what my page looks like before the popu ...

javascriptcssreactjsimagepopup

I'm curious about where to find more information on this new technology called the 'scroll to page' feature

Recently, I came across a captivating website feature that caught my eye. As someone relatively new to front end web development, I am intrigued by the scrolling technique used on this site. I'm specifically drawn to the 'page to page' scro ...

javascriptjquerycssfrontend

Ways to conceal Bootstrap-designed elements behind a fullscreen overlay

I'm attempting to create a transparent layer to conceal the entire content of my page behind it. It works fine without the Bootstrap columns, but as soon as I add the columns for responsive design, it stops working (or maybe I'm just not understa ...

htmlcssbootstrap-5

The issue with the smooth scrolling feature in next/link has not been resolved

I am currently facing an issue where smooth scrolling is not working when using next/Link, but it works perfectly fine with anchor tags. However, the downside of using anchor tags is that the page reloads each time, whereas next/link does not reload the pa ...

javascriptcssnext.jsanchornext-link

Is there a way to drop a pin on the Google Maps app?

Is there a way to pinpoint the specific location on Google Maps? <google-map id="map-container" width="100%" height="100%" class="maps"></google-map> ...

htmlcssangulartypescript

Adjust the CSS to set the size of the element's height to a percentage of the screen

I'm curious if there's a way to set the CSS with an x (unknown) percentage amount, like height: *%;. If it's not possible, how can I make it take the size of the rest of the screen? I experimented in http://jsfiddle.net/omarjuvera/xnau2wsL/ ...

htmlcss

The @media print rule for Angular 16 in the style.css file is not functioning properly

I'm currently working on an Angular component called ViewTask, which has a template that is rendered inside the app component. The app component also consists of a side nav bar. My goal is to only display the content inside the 'print-section&apo ...

htmlcssangularmedia-queries

Error with HTML form validation

After clicking the "Send Request" button, the query string ?req_flag=0 is not appearing in the URL. What could be causing this issue? I want my URL to look like this: localhost/flavourr/send_req.php?req_flag=0&f_e_mail_add=value <pre> <form ...

phphtmlcssxhtmltextarea

Adjust the size of a div element dynamically to maintain the aspect ratio of a background image while keeping the

Utilizing the slick slider from http://kenwheeler.github.io/slick/ to display images of varying sizes, including both portrait and landscape pictures. These images are displayed as background-image properties of the div. By default, the slider has a fixed ...

javascriptcssslideraspect-ratioslick.js

What could be causing my grid-area properties to not take effect?

I'm attempting to create a basic structure with a header in the top row, menu and content in the middle row, and footer at the bottom. Here is what I have so far: body { color: white; } .container { background: cyan; display: grid; ...

csscss-grid

The overlay image is not positioned correctly in the center

I am struggling with positioning a play icon overlay on the image in my list-group-item. The current issue is that the icon is centered on the entire list-group-item instead of just the image itself. I am working with bootstrap 4.4.1. Here is the HTML str ...

htmlcssbootstrap-4

Switch Between Different Background Colors for Table Rows With Each Click

This script changes colors when a row in a specific column is clicked: $(document).ready(function(){ $("#rowClick").children("tbody").children("tr").children("td").click(function(){ $(this.parentNode).toggleClass("enroute"); }); }); CSS: .placed{ b ...

javascriptjqueryhtmlcss

Adjust my website to fit various screen sizes and mobile devices

I'm encountering an issue on my website regarding resizing elements and content on various resolutions, particularly on mobile devices. You can view the website here. I've been testing it on both an iPad and a 14" laptop. While everything appear ...

jqueryhtmlcssipadresize