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

What is the best way to create a slideshow that automatically starts upon loading and pauses when hovered over?

I have recently set up a div element for my slideshow. I've included a script to enable navigation using next and previous arrows. However, I am looking to add an automatic slideshow feature that stops on hover. As a beginner, I would appreciate any a ...

javascriptjqueryhtmlcsshover

Enhancing websites with font-awesome icons and upgrading from older versions to the latest

Seeking guidance on updating our project to use the latest Macadmine theme. The transition from Font Awesome 3 to Font Awesome 4 requires changing all icons to their proper names. I came across a helpful resource at https://github.com/FortAwesome/Font-Aw ...

cssangularjsfont-awesome

Modify the font style of numbers based on the keyboard language selected by the user

Is it possible to change the font family of numbers in input fields based on the user's keyboard language? For example, if the user is typing in Persian, the numbers should be displayed in a Persian font, and when they switch to an English keyboard, t ...

javascripthtmlcssreactjsnext.js

Mouseover Magic: Text and Captions Come Alive with JQuery

I am trying to create a rollover effect that displays text when the user hovers over an image. Despite researching numerous tutorials, I have found limited resources on incorporating text or captions using jQuery. Most of the available tutorials focus on C ...

jqueryhtmlcssrollover

Ways to expand the height of content using grid?

I'm having trouble getting my grid template to stretch content to the end using CSS Grid. The behavior is unexpected, and I want to create a Jeopardy game where clicking on a box reveals a question. Initially, I applied display: grid to the body elem ...

htmlcsscss-grid

Present Images and Text Alongside Each Other in a Grid Layout

My goal is to have an image and text displayed side by side, but for some reason they are appearing stacked on top of each other. https://i.stack.imgur.com/F8OXL.png If you want to take a look at the code I am using, here is the link to my CodePen: https: ...

htmlcss

Sequence of HTML elements arranged in a stack

Recently, I came across a useful jQuery tutorial called "jQuery for Absolute Beginners: Day 8". In this tutorial, there is an interesting code snippet that caught my attention: $(function() { $('.wrap').hover(function() { $(this).childre ...

javascriptjqueryhtmlcss

What is the best way to utilize CSS to center an element in relation to the scroll bar?

For a group project, I successfully centered a div on a webpage. However, I ran into an issue where the website's contents are centered taking the scroll bar width into consideration. This means that the web page contents adjust to be centered without ...

htmlcsscentering

Guide to switching between 3 classes with mouseover using JavaScript

Currently, I am dealing with an unordered list that contains 4 items. The goal is to have the list grow to 100% of its width when hovered over, while all 'noun hovered li' items should shrink to a width of 0%. Once the cursor leaves, everything s ...

javascripthtmlcss

The media query for mobile is not functioning properly

Hello, I have a page with MVC that includes CSS for iPad and mobile devices. The media query for iPad (@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)) works perfectly, but I am struggling to get the media query for mobile ...

cssmobilemedia-queries

Unable to display button image when using both id and style class in CSS

During my transition from Java 7 to Java 8, I've encountered a peculiar issue. Here's a brief explanation: In my FXML file, I have a button defined with style class button-red-big and id btnInput: <Button id="btnInput" fx:id="btnInput" align ...

javacssjavafx-8fxml

Tips for deleting Material Angular CSS codes from the head section of your website

I am currently studying AngularJS and Material Angular Design. However, I have noticed that the Material Design includes CSS codes within the <head> tags. See attached screenshot for reference. Is there a way for me to extract these codes from the h ...

cssangularjsangular-material

What are the steps to create a customized app bar with React and Material-UI similar to this design?

Can anyone help me create an app bar that resembles this design: Click here to view I have managed to implement the search box in the top half of the app bar, but I am struggling with adding the bottom half. Here is the code I have written so far: ...

htmlcssreactjsreact-nativematerial-ui

What attribute should I utilize to ensure the image always takes priority over text when using @media queries?

resolution My goal is to have the image appear on top of the text when resizing the window, but maintain the appearance shown in the attached image when using a larger resolution. Below is the CSS code I am currently using: .section4 { text-align: cen ...

htmlcss

Emphasize the designated drop zone in Dragula

Incorporating the Dragula package into my Angular 2 project has greatly enhanced the drag-and-drop functionality. Bundling this feature has been a seamless experience. Visit the ng2-dragula GitHub page for more information. Although the drag-and-drop fun ...

javascriptcssangularng2-dragula

Tips for customizing the appearance of a label when a MUI Radio Button is selected

Hello everyone, I am attempting to customize the label text color of a radio button to turn blue when selected. https://i.stack.imgur.com/btSc2.jpg HERE IS THE CODE FOR MY MUI BUTTON SO FAR import * as React from "react"; import Radio from &quo ...

javascriptcssreactjstypescriptmaterial-ui

Basic image slider featuring adjustable heights

I'm currently working on a basic content slider, but I've encountered an issue where the container doesn't expand as new content slides in. It seems to be related to the absolute positioning of the content items. If I don't use absolute ...

jqueryjquery-uicss

A custom class that uses toggleClass() does not trigger an alert upon a click event

I am encountering an issue with the toggleClass() function in jQuery that I haven't seen addressed before. Despite successfully toggling the class of one button when clicked, I am unable to trigger a click event on the newly toggled class. Here is th ...

javascriptjqueryhtmlcss

employing personalized CSS styles

When I implement the following code: <div class="metanav"> ... </div> Every element inside that div will inherit the styling of .metanav. But if I duplicate .metanav in the CSS and rename it to A; then update the div's class to: <d ...

htmlcsscss-selectors

What is the best way to incorporate three divs into a single line while maintaining a responsive design

Struggling with adding a logo above a login form? As a PHP developer without design expertise, achieving a responsive layout like the image below may seem daunting. To create this layout, consider using the following code: <style> .container { ...

htmlcssflexbox