What is the best way to make sure that the parent div of an svg shows its shadow on top of the svg itself?

I am in the process of creating an interactive world map using an SVG map. The SVG format is necessary because I have implemented functionality to zoom in and move the map around. However, a challenge has arisen: the SVG element is obstructing the shadow of its parent div.

Below are the snippets of CSS and HTML code:

.map__image{
 width: 58%;
 float: left;
 border-radius: 10px;
 box-shadow: -6px -6px 14px rgba(255, 255, 255, .7),
             -6px -6px 10px rgba(255, 255, 255, .5),
             6px 6px 8px rgba(255, 255, 255, .075),
             6px 6px 10px rgba(0, 0, 0, .15);
 background-color: #e5e5e5;
 margin:14px;
 padding:0.8rem;

<html>
    <head>
        <meta charset="utf-8" />
        <title>Test Interactive World Map</title>
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimal-ui"/>
    </head>
    <body>
        <div id="map" class="map">
            <div class="map__image">
                <div id="pagecarte">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:amcharts="http://amcharts.com/ammap" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1051 678" id="svg">
                        
                        <g id="shape">
                            <a id="region-AE" xlink:title="United Arab Emirates" > 
                                    <path class="land" d="M619.874,393.722L620.373,393.573L620.477,394.411L622.671,393.93L624.99,394.009L626.684,394.1L628.604,392.028L630.695,390.054L632.467,388.146L633.001,389.202L633.382,391.639L631.949,391.651L631.72,393.648L632.216,394.073L630.947,394.674L630.939,395.919L630.122,397.175L630.049,398.394L629.484,399.032L621.056,397.508L619.981,394.428z"/>
                            </a>
                        </g>
                    </svg>
                </div>
                
                <button id="reset" , class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect controls-button">
                    Reset
                </button>
            </div>
        </div>
    </body>
</html>

1-I have a JavaScript file that handles the "is-active" class as well as the scaling and panning of the SVG.

2-In the actual project, there are numerous paths within the SVG section, but for simplicity in this example, I only included one.

htmlcsssvg

Answer №1

To achieve the desired effect of placing the shadow above the SVG, one solution is to utilize a pseudo element in your CSS code.

#pagecarte::before {
  content: "";
  z-index: 1; /* ensuring it appears above SVG */
  position: absolute;
  inset: 0;
  pointer-events: none; /* prevents interference with panning */
  box-shadow: inset -2px -2px 6px rgb(255 255 255 / 70%), inset -2px -2px 4px rgb(255 255 255 / 50%), inset 2px 2px 2px rgb(255 255 255 / 8%), inset 2px 2px 4px rgb(0 0 0 / 15%)
}

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

Having trouble with CSS webkit radial not working on iPad's Safari Mobile browser?

I'm feeling confused right now. I have this gradient code background-image: -webkit-radial-gradient(50% 65%, ellipse cover, #f2f2f4, #201935 55%); It's working on Safari when I change the User Agent to Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3 ...

cssipadwebkit

Display the table once the radio button has been selected

Before we proceed, please take a look at the following two images: image 1 image 2 I have over 20 fields similar to 'Image 1'. If "Yes" is selected, then a table like in 'Image 2' should be displayed. This means I have 20 Yes/No fields ...

javascripthtmljquerycss

Design a personalized select element with a unique background hue

https://i.stack.imgur.com/Dzifp.jpg Trying to create a navigation with col-md-9 and select tags but facing an issue where adding a background-color to the div causes the green background of the arrow to disappear. https://i.stack.imgur.com/A4P9Q.png Plea ...

htmlcss

Is there a way to adjust the label elevation for a Material UI TextField component?

I am trying to enhance the appearance of a textfield label, but I am facing some challenges with my code. textStyle: { backgroundColor: '#1c1a1a', border: 0, borderRadius: 0, width: 400, height: 66, display: 'flex&a ...

javascriptcssreactjsmaterial-ui

Styling the `mat-hint` in Angular Material for large blocks of text

Currently, I am undertaking a project in Angular 9 and utilizing Material design. If you want to view a demo of my work, you can find it here: https://stackblitz.com/edit/mat-hint-styling-issue?file=src/app/app.component.html In my project, I am using in ...

cssangularsassangular-materialangular9

Recognize different HTML components when an event occurs

My application is equipped with a multitude of buttons, inputs, and other elements that trigger different events. I am looking for a way to easily differentiate between each element and the event it triggers. For instance, consider the following snippet f ...

javascripthtmlangularjs

What is the best way to retrieve a PDF file from another website and showcase it on our own site without any redirection?

Is there a way to display a pdf from another website without having to redirect to that site? I'm looking for a solution that involves using the URL directly. ...

javascripthtml

Enhance your HTML code using JavaScript (specifically jQuery)

Is there a way for me to transform the following code into a more visually appealing format? <td> <a href="/Test/Page/2">Previous</a> <a href="/Test/Page/1">1</a> <a href="/Test/Page/2">2</a> 3 ...

jqueryhtmldomrazor

The media query fails to start in the browser's mobile display

Instead of just adjusting the browser window size, I utilized Chrome's developer tools to make adjustments. I double-checked that the appropriate meta tags were included in the code: <meta name="viewport" content="width=device-width, initial-scal ...

cssmobilemedia-queries

React Material-UI select component malfunctions when I enclose the menu item within a Tooltip wrapper

Here is a snippet of my code: return( <FormControl sx={{ m: 1, minWidth: 80 }}> <InputLabel id="demo-simple-select-autowidth-label">Age</InputLabel> <Select labelId="demo-simple-select-autowidt ...

javascripthtmlreactjsmaterial-ui

Node.js based simplistic static HTML web server

I'm looking to create a basic server for serving local HTML and JS files while working on development projects. I attempted to use a node app with express to respond with the page based on the URL, but unfortunately had no success. Here's my cod ...

htmlnode.jsstatic

Is there a way to display the background when the popover is visible and hide it when the popover is hidden?

How do I make the backdrop appear when the popover is displayed, and disappear when the popover is closed? $(function(){ var content = '<button class="btn btn-sm btn-default" onclick="location.href=\'/billing/\'">Pay Now ...

javascriptjquerycsstwitter-bootstrap

Delegating events with .on('click') and using the CSS negation selector :not()

Struggling to implement event delegation for a dynamically added or removed class? I need to create an event for elements that are clicked, but without a specific class. Here's the code I have so far, but it doesn't seem to be working. Could it b ...

jquerycsseventsdelegationnegation

Creating input fields using Bootstrap HTML on a single line

Struggling with Bootstrap, I can't figure out how to display the following HTML inputs in a single line: <div class="row"> <div class="col-sm-8"> <div class="form-group"> <input class="form-control" ...

jqueryhtmlcsstwitter-bootstrap

Where within Video.js can I modify the color of the large play button when the cursor hovers over the video?

After successfully changing the SCSS $primary-background-color to orange using the video.js default skin editor (CodePen), I encountered an issue. Whenever I hover my mouse cursor over the video, the big play button background reverts to its default grayis ...

javascriptcssvideohtml5-videovideo.js

What is the best way to utilize the features of component A within component B when they exist as separate entities

Component A has all the necessary functionalities, and I want to use it in Component B. The code for ComponentA.ts is extensive, but it's not written in a service. How can I utilize the logic from Component A without using a service, considering both ...

javascripthtmlangulartypescriptangular11

When scrolling the page, the Circle Mouse Follow feature will dynamically move with your cursor

Hey everyone! I'm currently working on implementing a mouse follow effect, but I'm facing an issue where the circle I've created moves along with the page when scrolling, instead of staying fixed to the mouse. Any suggestions or tips would b ...

javascriptjqueryhtmlcss

Using Jquery to set up an event listener on a child div that changes the CSS property of its parent div

I am currently working on a product customization form where the radio buttons are hidden using opacity:0. My goal is to have the border of the image turn black when an option is selected as a visual feedback for the user. I've implemented an event l ...

jquerycssformsradio-buttononfocus

HTML template without the use of server-side scripting languages like PHP or Ruby on

Is there a way to develop HTML templates without relying on backend languages such as PHP or Ruby on Rails? I tried using JavaScript, but I encountered issues with my current code when adding nodes after the DOM is loaded. An ideal solution for me would ...

htmltemplatescompilationhamlpartials

"Why is it that only one of the two similar spans with onclick event is not functioning properly

Encountering a perplexing issue that has me stumped. Here's the code in question: js: function Test() { alert("test"); } html: <span id='bla' onclick='Test()'> Click me </span> <hr> <span id='bla2& ...

javascripthtmlonclick