The fillOpacity and opacity properties appear to be malfunctioning

Note: While I understand that image masking can solve my issue, I prefer not to use it as it would require me to use my image as a background and could present accessibility challenges. I am specifically looking for solutions involving clip-path.

Issue: The <rect> elements in my SVG file are not responding to changes in fillOpacity or opacity. These <rect> elements need to be animated individually, so adjusting the opacity of the entire image/SVG simultaneously is not an option. I have attempted the fixes suggested here and here, but none of them have been successful.

This project involves React, and here is the HTML and CSS code in question:

img {
  clip-path: url(#path-One);
  height: 60vw;
}
<div>
  <img src="https://images.unsplash.com/photo-1506399558188-acca6f8cbf41?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2173&q=80" alt="Big Data" />
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280.000000 673.000000">
    <clipPath id="path-One" transform="scale(1.127, 1.127)">
      <!-- Line 1: -->
      <rect width="10vw" height="10vw" fillOpacity="0" />
      <rect x="10vw" width="10vw" height="10vw" />
      <rect x="20vw" width="10vw" height="10vw" />
      <rect x="30vw" width="10vw" height="10vw" />
      <rect x="40vw" width="10vw" height="10vw" />
      <rect x="50vw" width="10vw" height="10vw" />
      <rect x="60vw" width="10vw" height="10vw" />
      <rect x="70vw" width="10vw" height="10vw" />
      <rect x="80vw" width="10vw" height="10vw" />
      <!-- Line 2: -->
      <rect y="10vw" width="10vw" height="10vw" />
      <rect x="10vw" y="10vw" width="10vw" height="10vw" />
      <rect x="20vw" y="10vw" width="10vw" height="10vw" />
      <rect x="30vw" y="10vw" width="10vw" height="10vw" />
      <rect x="40vw" y="10vw" width="10vw" height="10vw" />
      <rect x="50vw" y="10vw" width="10vw" height="10vw" />
      <rect x="60vw" y="10vw" width="10vw" height="10vw" />
      <rect x="70vw" y="10vw" width="10vw" height="10vw" />
      <rect x="80vw" y="10vw" width="10vw" height="10vw" />
      <!-- Line 3: -->
      <rect y="20vw" width="10vw" height="10vw" />
      <rect x="10vw" y="20vw" width="10vw" height="10vw" />
      <rect x="20vw" y="20vw" width="10vw" height="10vw" />
      <rect x="30vw" y="20vw" width="10vw" height="10vw" />
      <rect x="40vw" y="20vw" width="10vw" height="10vw" />
      <rect x="50vw" y="20vw" width="10vw" height="10vw" />
      <rect x="60vw" y="20vw" width="10vw" height="10vw" />
      <rect x="70vw" y="20vw" width="10vw" height="10vw" />
      <rect x="80vw" y="20vw" width="10vw" height="10vw" />
      <!-- Line 4: -->
      <rect y="30vw" width="10vw" height="10vw" />
      <rect x="10vw" y="30vw" width="10vw" height="10vw" />
      <rect x="20vw" y="30vw" width="10vw" height="10vw" />
      <rect x="30vw" y="30vw" width="10vw" height="10vw" />
      <rect x="40vw" y="30vw" width="10vw" height="10vw" />
      <rect x="50vw" y="30vw" width="10vw" height="10vw" />
      <rect x="60vw" y="30vw" width="10vw" height="10vw" />
      <rect x="70vw" y="30vw" width="10vw" height="10vw" />
      <rect x="80vw" y="30vw" width="10vw" height="10vw" />
    </clipPath>
  </svg>
</div>

htmlcssimagesvgstyling

Answer №1

You have encountered a few issues:

Issues with Fill Colors and Transparency

The mask elements are currently all black, resulting in the masked image being 100% transparent. To resolve this, change the fill color of your <rect> elements to white as simply adjusting the fill-opacity from 1 to 0 will not have any effect.

svg {
  border: 1px solid red;
}
<h3>Working Example</h3>
<svg width="220" height="100" viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
          <mask id="path-One">
            <g fill="#fff">
            <rect width="20" height="20" fill-opacity="0" />
            ...
            <rect y="80" x="200" width="20" height="20" fill-opacity="0" />
              </g>
          </mask>
          <image width="100%" mask="url(#path-One)" href="https://images.unsplash.com/photo-1506399558188-acca6f8cbf41?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2173&q=80"></image>
        </svg>

<h3>Example that Doesn't Work</h3>

<svg width="220" height="100" viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
          <mask id="path-Two">
            <g >
            <rect width="20" height="20" fill-opacity="0" />
            ...
              </g>
          </mask>
          <image width="100%" mask="url(#path-Two)" href="https://images.unsplash.com/photo-1506399558188-acca6f8cbf41?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2173&q=80"></image>
        </svg>

Using SVG Masks to Mask HTML Elements

At present, only Firefox supports masking of HTML elements using inline SVG masks. As a workaround, you can dynamically convert the SVG into a data URL.

svgToMaskDataUrl( svgMask, imgMasked)

function svgToMaskDataUrl( mask, maskedEl){
  let maskSvg = new XMLSerializer().serializeToString(mask)
  let dataURL = `data:image/svg+xml,`+ encodeURIComponent(maskSvg);
  maskedEl.style.webkitMaskImage=`url(${dataURL})`;
}
body {
  background: #ccc;
}
img {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  max-width:100%;
}

svg {
  border: 1px solid red;
}
<svg id="svgMask" viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg" style="width:0; height:0; position:absolute;">
  <g fill="white">
    <rect width="20" height="20" fill-opacity="0" />
    ...
    <rect y="80" x="200" width="20" height="20" fill-opacity="0" />
  </g>
</svg>

<img id="imgMasked" src="https://images.unsplash.com/photo-1506399558188-acca6f8cbf41?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2173&q=80" alt="Your Image" />

Answer №2

If you're looking to update the clip path, consider using a mask instead of setting the image as a background. The CSS mask property can achieve the desired effect without unnecessary complications.

img {
  mask: url(#path-One);
  height: 60vw;
}
<div>
  <img src="https://images.unsplash.com/photo-1506399558188-acca6f8cbf41?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2173&q=80" alt="Big Data" />
  <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
    <mask id="path-One" fill="white">
      <!-- Line 1: -->
      <rect id="tile" width="10vw" height="10vw" transform="scale(.99)" />
      <use href="#tile" x="10vw" fill-opacity=".5"/>
      <use href="#tile" x="20vw"/>
      <use href="#tile" x="30vw"/>
      <use href="#tile" x="40vw"/>
      <use href="#tile" x="50vw"/>
      <use href="#tile" x="60vw"/>
      <use href="#tile" x="70vw"/>
      <use href="#tile" x="80vw"/>
      <!-- Line 2: -->
      <use href="#tile" x="0vw" y="10vw"/>
      <use href="#tile" x="10vw" y="10vw"/>
      <use href="#tile" x="20vw" y="10vw"/>
      <use href="#tile" x="30vw" y="10vw"/>
      <use href="#tile" x="40vw" y="10vw"/>
      <use href="#tile" x="50vw" y="10vw"/>
      <use href="#tile" x="60vw" y="10vw"/>
      <use href="#tile" x="70vw" y="10vw"/>
      <use href="#tile" x="80vw" y="10vw"/>
      <!-- Line 3: -->
      <use href="#tile" x="0vw" y="20vw"/>
      <use href="#tile" x="10vw" y="20vw"/>
      <use href="#tile" x="20vw" y="20vw"/>
      <use href="#tile" x="30vw" y="20vw"/>
      <use href="#tile" x="40vw" y="20vw"/>
      <use href="#tile" x="50vw" y="20vw"/>
      <use href="#tile" x="60vw" y="20vw"/>
      <use href="#tile" x="70vw" y="20vw"/>
      <use href="#tile" x="80vw" y="20vw"/>
      <!-- Line 4: -->
      <use href="#tile" x="0vw" y="30vw"/>
      <use href="#tile" x="10vw" y="30vw"/>
      <use href="#tile" x="20vw" y="30vw"/>
      <use href="#tile" x="30vw" y="30vw"/>
      <use href="#tile" x="40vw" y="30vw"/>
      <use href="#tile" x="50vw" y="30vw"/>
      <use href="#tile" x="60vw" y="30vw"/>
      <use href="#tile" x="70vw" y="30vw"/>
      <use href="#tile" x="80vw" y="30vw"/>
    </mask>
  </svg>
</div>

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

Implementing ngClass with a dynamic ID in the URL condition

I am attempting to create an ngClass condition that adds an active class to a list element. Specifically, I want it to work for both the URLs '/companies' and '/company/:id'. The issue I am facing is that the current setup does not fun ...

cssangulartwitter-bootstrap

Submitting documents via jQuery post

I am facing an issue with my HTML form where I am trying to upload an image file. After submitting the form, I use JavaScript to prevent the default action and then make a jQuery post request (without refreshing the page) with the form data. However, despi ...

jqueryhtmlajaximagepost

The view has no access to $scope but the controller does

I need to display the iso code using a $scope when selecting a country from a list. The list of countries is fetched through a $http call in a factory and then stored in a scope. ///////// get countries //////////////// tableFactory.getCountries().then(f ...

javascripthtmlangularjs

Extracting data from websites and importing it into Excel with VBA

I am venturing into the world of web scraping for the first time using VBA. My goal is to extract pricing information from our company's distributors and save it in an Excel file for our sales team to analyze. The process involves taking the URL from ...

htmlexcelvbaweb-scraping

What is the best method to retrieve duplicate fields from a database in HTML5?

this.db.transaction(function (tx) { tx.executeSql('SELECT tsk.*, cont.firstName, cont.lastName ,cont1.firstName, cont1.lastName, list.listId FROM tbl_tasks tsk, tbl_contacts cont,tbl_contactequests cont1, tbl_lists list WHE ...

sqlitehtmlenyo

A Simple Guide to Mastering the Flexbox Columns Concept

After exploring flexbox for some time and finally grasping its potential, I wanted to share an example showcasing how simple it is to create flexible column layouts without the need for CSS hacks involving excessive margins and paddings. I understand that ...

htmlcssmultiple-columnsflexbox

Problem with ngStyle: Error indicating that the expected '}' is missing

I encountered an error in the Chrome console when trying to interpret the code below: <div [ngStyle]="{'width': '100%'; 'height': '100%'; 'background-size': 'cover'; 'background-repeat&ap ...

javascripthtmlcssangulartypescript

Ways to troubleshoot the logic issue in the loop for my simple login interface

I have been able to successfully implement code that detects when a user enters an incorrect username or password, as well as granting access when the correct credentials are provided initially. However, there seems to be a logic error in my loop that prev ...

javascripthtmlajaxlogic

A step-by-step guide to showcasing dates in HTML with Angular

I have set up two datepickers in my HTML file using bootstrap and I am attempting to display a message that shows the period between the first selected date and the second selected date. The typescript class is as follows: export class Datepicker { ...

htmlangulartypescript

Methods to prevent images from spilling over into divs?

I am looking to implement a unique functionality that involves three images sliding out of the page to the right, fading in the process, and not overflowing. Simultaneously, three other images slide in to take their place. If you want to see the Framework ...

htmlcssanimationoverflow

Implementing WordPress link pagination for displaying only the next and previous buttons

I'm new to WP and need some guidance. I want to display a list of images in a post, with the ability for users to click next and previous to cycle through them like separate pages. To split the post into multiple pages, I added this code: <!- ...

phphtmlcsswordpress

Surprising sight of a blank canvas behind the font-awesome icon

Is there a way to remove the unexpected white background that appears when adding a font-awesome icon? Here is the HTML code: <div class="notifications-window" id="close-notifications"> <div class="notifications-header&qu ...

htmlcssiconsfont-awesomestyling

What is the best way to eliminate the header and side navigation in a master page design?

I've set up a master page called wrap.master which is connected to multiple content pages. I'm looking to create a new content page and link it to the master page. However, I want this new content page to be independent from the header and side n ...

htmlcssasp.net

Issues with JQuery script causing inconsistency in checking checkboxes

My code includes two functions designed to check and uncheck all checkboxes with a specific class. Initially, the functions work as expected but upon subsequent attempts to run them, the checkboxes do not function properly. Instead, the HTML code seems to ...

javascriptjqueryhtml

Utilizing identical CSS for both mobile and desktop interfaces, while customizing margins and paddings separately

I am facing a problem on my website where the padding and margins appear differently on different devices. I have compared screenshots of the site on an Android device and my desktop PC: Site displayed on mobile device: Desktop view: Below is the CSS co ...

androidhtmlcssmobile

CSS: Alignment of Lists with Three Items

In my CSS, I am aligning two parts of a list item to the left and right side like this: ul li div.left { float: left; } ul li { text-align: right; } <ul> <li><div class="left">On the left</div>On the right</li> ...

htmlcsslist

Transferring information from a form with multiple fieldsets to php

I am facing an issue with my form that is built using multiple fieldsets. The problem is related to passing values from each fieldset to welcome.php upon submitting the form. However, when I click submit, nothing happens and the values are not displayed. A ...

phpjqueryhtmlforms

invoking a function from an attached HTML file using Angular

How can I invoke a function in Angular using inner HTML? I attempted the following: cellTemplateFunc(cellElement, cellInfo){ var subContainer = document.createElement('div'); subContainer.innerHTML = "<a href='javascript:v ...

htmlangulardevextreme-angular

My custom CSS in React is being overshadowed by the default Bootstrap styles

View project image Currently working on a React project that requires Bootstrap. However, I am facing issues with Bootstrap overriding my custom CSS. Some default Bootstrap styles are affecting my headings. I have attempted various solutions such as placi ...

cssreactjscdn

Horizontal centering using Bootstrap 4 media

How can I horizontally center a media element? Here is the code for my media: <div class="container"> <div class="row"> <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <div class="media"> ...

htmlcssbootstrap-4