Arranging masked divs' content using SVG

Currently faced with the challenge of creating stacked <div> elements where the top-level <div> has masked content in React (although this is primarily for SVG element notation).

I have two responsively-styled <div>s — A and B — each containing an <img>, where B is positioned above A. I want to apply an inline, arbitrary SVG mask to <div> B to partially reveal the content of <div> A below it.

My goal is to achieve a visual result like this...

Two absolutely positioned <div>s stacked on top of each other: https://i.sstatic.net/qxQhE.png

The content of an inline <svg>: https://i.sstatic.net/ZZtm5.png

...Used as a mask on <div> B to create this effect: https://i.sstatic.net/rr48i.png

I prefer not to use clip-path due to limited browser support, so I'm seeking a simpler approach. It's crucial that I can position the <img> elements within the <div>s and add more elements if necessary, rather than just setting a background mask-image on the <svg>.

Is there an alternative method to achieve this without using SVG <mask> or <clipPath> elements? If not, can more than just an <img> be embedded in the SVG mask via SVG <image>?

htmlcssreactjssvg

Answer №1

For this particular illustration, I opted to incorporate images as per your request. Normally, I would have utilized background images instead. Furthermore, I've made use of clip-path to clip the second div. In the initial example, I employed an svg path for this purpose.

#a,
#b {
  outline: 1px solid;
  width: 300px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
}
#b{
  -webkit-clip-path: url(#clip);
  clip-path: url(#clip); 
}
#wrap {
  position: relative;
}
<div id="wrap">
<div id="a">
  <img width="300" height="300" src ="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" />
</div>
<div id="b">
  <img  width="300" height="300"  src ="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppyBeagle300.jpg" />
</div>
</div>

<svg height="0" width="0" class="svg-clip" style="position:absolute">
    <defs>
         <clipPath id="clip" clipPathUnits="objectBoundingBox">
           <path d="M0,0.9 L0.3,.6 .4,.75  .6,.3 .75,.5 1,.1 1,1 0,1z" />
        </clipPath>
    </defs>
</svg>

Alternatively, you can utilize the polygon function.

#a,
#b {
  outline: 1px solid;
  width: 300px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
}
#b{
-webkit-clip-path: polygon(0 90%, 30% 60%, 40% 75%, 60% 30%, 75% 50%, 100% 10%, 100% 100%, 0 100%);
clip-path: polygon(0 90%, 30% 60%, 40% 75%, 60% 30%, 75% 50%, 100% 10%, 100% 100%, 0 100%);
}
#wrap {
  position: relative;
}
<div id="wrap">
<div id="a">
  <img width="300" height="300" src ="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" />
</div>
<div id="b">
  <img  width="300" height="300"  src ="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppyBeagle300.jpg" />
</div>
</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

Troubleshooting Full Screen Problems with Three.js

Despite my efforts to troubleshoot, I am still encountering a frustrating issue with the Three.js API. Even after thoroughly studying the API documentation, browsing through StackOverflow questions, and using debugging tools like firebug and chrome's ...

javascripthtmlfullscreenhtml5-canvasthree.js

What is the best way to ensure that the background of my sticky table th stays in place and does not scroll away

I have a dynamic table where the table body rows are loaded dynamically. The wrapper uses Bootstrap5's overflow-scroll feature to keep the table at a fixed height and scroll if there are too many rows. I managed to make the table head sticky, but had ...

htmlcssbootstrap-5

Flexbox: The final element is not positioned on the right side

I have been trying to align the final item on the right side using margin-left: auto. The desired output is achieved in jsfiddle. I am using Visual Studio Code with the same code, but when viewed in Firefox, Chrome, or Edge, the item does not appear on the ...

htmlcssflexbox

ReactJS | Display or Conceal an Array of Objects depending on a specified condition

The Challenge: I am currently working on a task that involves hiding/showing react elements dynamically based on a property of the constructed Object. To be more specific, let's consider the Array of Objects below: const Apps = [ {name: App1, permi ...

javascriptreactjsfilteres6-map

I'm curious if it's possible to modularize a Page Element in Next.js that receives staticProps through a parsedUrlQuery

The scenario involves opening http://localhost:3000/users/101 Desired layout for the page and integration of the second code snippet in [id].tsx import CTASection from '../../components/samples/CTASection'; import { User } from "../../inte ...

javascriptreactjsnext.js

Can you please explain how to reverse the deletion on both ends just like I demonstrated in my video using VS Code?

Watch a brief video detailing my issue Despite uninstalling all extensions and resetting settings to default, the problem persists. Could I be missing something? ...

htmlcssvisual-studio-code

Adjust the alignment of two headers with varying sizes

Can someone provide guidance on aligning two headers of different sizes (e.g. h3 and h5) based on their bottom edges, making them appear like a cohesive group in a sentence format? The current code snippet I am working with is as follows: ...

cssmaterial-ui

Obtain the background color of an element using the source attribute in Selenium WebDriver

Understanding the x-path is crucial, such as < img id="" src="/A/A/B.png" style=""> My task involves identifying the color of the image, but unfortunately, the style attribute does not provide any information about color. It only includes details a ...

htmlcssselenium

Struggling to get the picture and text to line up

I've been struggling with a seemingly simple task but just can't seem to make it work. My goal is to create a basic comment structure that looks like this: *image* *name* *comment* The issue I'm facing is trying to position the ...

htmlcssposition

Using AJAX to query a database and updating a div tag with the submitted form entries

I need assistance in setting up a webpage with an AJAX form. The idea is that upon submission, the form's values will be used to search and query a database for results, which will then be displayed in the same DIV as the form. Any guidance or help o ...

phpjavascriptmysqlhtmlajax

The React component fails to display updates following a state change

Greetings, I am currently facing an issue with re-rendering the component. Below is the code for the initial screen where a custom component is being utilized: class Ahelle extends React.Component{ constructor(props){ super(props) this. ...

javascriptreactjsreact-nativestate

When the input field is in debug mode and has a keydown event listener, the character fails to appear as intended

As a newcomer to javascript/html, I have an input with a keydown event listener. Surprisingly, everything seems to work fine when I try it out in the browser. I type a character and see that my javascript is executed, then I type another character and it w ...

javascriptjqueryhtmlevents

Bug Found in AngularJS v1.3.15: Text Color Rendering Glitch on Page Load with WebKit

It appears that the text colors (which should be blue) are not displaying correctly until a user hovers over the text or resizes the window. I attempted to resolve this issue by adjusting the transition property so that it triggers on hover/active states ...

cssangularjswebkit

Tips for implementing a watermark background image that appears in each section of a single-page website

Currently, I am exploring HTML, CSS, and Bootstrap and facing a particular issue. I am attempting to add a logo to a website as a background. I have already discovered how to do this by following the instructions here. This website is comprised of a sing ...

htmlcssbootstrap-4

Unable to display information retrieved from an API within a React application

I am facing an issue with rendering questions fetched from an API. I have set up the state and used useEffect to make the API call. However, when I try to display the questions, it seems to disrupt my CSS and show a blank page. I even attempted moving the ...

javascriptreactjs

angularjs: container holding directive is currently not visible, with a height and width of 0 pixels

When implementing a directive in this way, the actual element (<a-directive>) appears to have dimensions of 0px height and 0px width. View jsfiddle example var myApp = angular.module('myApp', []).directive('aDirective', function ...

cssangularjsangularjs-directive

Center a list-group with text and dropdown using Bootstrap 4 vertical alignment

I am relatively new to using Bootstrap 4 and I am encountering challenges in vertically aligning certain elements within a list-group. Specifically, I have text on the left side and a dropdown on the right. <div class="dashboard-blocks"> <ul cl ...

htmlcssbootstrap-4

What is the best way to create a responsive div containing multiple images?

I am working on a slider and my approach is to create a div and insert 4 images inside it. The images will be stacked one above the other using position: absolute, with a width of 1013px, max-width of 100%, and height set to auto for responsiveness. The is ...

javascripthtmlcss

Obtaining information upon the loading of a Modal in a Next.js application

I am currently developing a feature for my application that allows users to add a new project to a timesheet system. To achieve this, I have created a Modal with a form inside. The form includes a Select field that should display all existing user names f ...

reactjsreact-hooksnext.jsfetch-api

hiding an "input type="file" element by using a button to conceal it

Is it possible to create a button that triggers file upload functionality? I couldn't find any solutions on Google. I've heard it can be done with labels, but I specifically need to use a button for better UX/UI. <button style="position:fixe ...

jqueryhtmlcssbuttoninput