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

How can HTML and CSS be linked to display images independently?

Check out this code: body{ background-image:url('http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg'); } div.header{ background-color:#F0F8FF; text-align:center; padding:3px; ...

javascriptjqueryhtmlcss

What is the best way to obtain the value of a radio button using ajax?

Here is the search button in my PHP file. I am unsure of how to connect the radio button to the JavaScript file. <button id="submit">Search</button> This is the starting point in the JavaScript file var xhr = new XMLHttpRequest(); f ...

javascriptphphtmlajaxxml

Creating a Dynamic System for Converting Numeric Digits to Alphabetical Grades

Utilizing the code provided below, you can calculate a user's grade point average ranging from A+ to E-. Is there a way, within the following fiddle, to not only display the GPA but also convert it into a corresponding letter grade from A+ to E-? Curr ...

javascriptjqueryhtmlcssdynamic

Customizing HTML element tags in MUI: Best practices

Using the most recent version of MUI (v5) and incorporating CssBaseline from @mui/materials. Typically, in CSS, I would set up my styles like this: body, html, #root { width: 100%; height: 100%; min-height: 100%; margin: 0; padding: 0; font-siz ...

cssreactjsmaterial-ui

Latest Chrome Update Resolves Fixed Positioning Bug

I am currently facing an issue with setting the second background image in the "Great people providing great service" section to a fixed position. You can view the website here: While the fixed position works in Safari and Firefox, it used to work in Chro ...

htmlcssgoogle-chromepositioning

Is there a way to modify the color of a corner in an HTML box?

<iframe width="100%" height="500" src="https://minnit.chat/Real97ChatRoom?embed&amp;web" style="border: none;" allowtransparency="true"></iframe><br /><a href="https://minnit.chat/Real97ChatRoom" target="_blank" rel="noopener noref ...

htmlcolorsbackgroundrounded-corners

A step-by-step guide on deleting an element within a div using jQuery

I am attempting to delete an HTML element using JQuery like this $('#' + divId + ' .settings_class').remove('.print_settings'); This code does not result in an error or remove the specified html element, however, the selecto ...

javascriptjqueryhtml

When invoking the jQuery ".load('pageName')" method, HTML pages are not loaded from the application cache

I have been working on incorporating the html5 offline caching functionality into our html pages, and everything seems to be running smoothly with jQuery version 1.4. However, I encountered a problem when I upgraded to jQuery 1.8. Specifically, issues aro ...

javascriptjqueryasp.nethtml

Update the value of the following element

In the table, each row has three text fields. <tr> <td><input type="text" data-type="number" name="qty[]" /></td> <td><input type="text" data-type="number" name="ucost[]" /></td> <td><input ty ...

javascriptjqueryhtml

I am faced with the puzzling situation where the value of my input type slider is displayed below the slider

I am currently working with HTML code that allows users to select a percentage using an input type range. Here is the code snippet I am using: <div class="container-fluid"> <div class="row"> <div class="c ...

htmlcssvertical-alignment

Display flash messages consistently in a designated area on the webpage instead of appearing at the top of the page in Flask

{% with messages = get_flashed_messages(with_categories=true) %} {% if messages %} {% for category, message in messages %} <div class="alert alert-{{ category }}" style=" ...

pythonhtmlcssflask

Is CSS the only way for Python Selenium to locate an element?

My attempt to log in to the Apple website using Selenium has hit a roadblock. When I try to locate the 'sign-in button' using find_element_by_id, an error pops up indicating it's actually a CSS selector. What exactly does that imply? I was ...

pythonhtmlselenium

Ways to conceal an HTML checkbox while displaying its accompanying label

Recently delving into jQuery, I have been exploring how to utilize the jQuery-ui Selectable component as a substitute for checkboxes. http://jqueryui.com/demos/selectable/ I believe I may be able to achieve this if I can discover a method to conceal the ...

jqueryhtmlcheckboxjquery-ui-selectable

Easily updating a SQL row with the click of an HTML button using PHP

I am in the process of creating a basic comment system that includes a rating for each comment. After reading a comment, users will be asked if they liked it with two options, "Yes" and "No". I am seeking a straightforward method to update the number of ...

phphtmlmysql

How can you align a list next to a set of images using HTML and CSS?

When working with these images in my code, I need to create a list alongside them: <div class="asideContent"> <ul> <li> <p> </p> </li> <li> <p></p> </li> ...

htmlcsslist

Using PHP to narrow down SQL results by date

When it comes to populating an HTML table with data from an SQL table using PHP, I have a specific method in place. Here's how I go about it: <table class="posts"> <?php $respost = mysqli_query($link,"SELECT * FROM table WHE ...

phphtmlmysqldatetime

The col-md-4 class in Bootstrap does not consistently maintain a width of 33%

Currently, I am utilizing bootstrap cards in my project. The number of cards within a card-deck varies dynamically. However, I have encountered an issue where each card should occupy a width of col-md-4 (33%). Everything works fine when there are more than ...

htmlcssbootstrap-4

Achieve a floating right alignment of an unordered list navigation using CSS without changing

I am currently implementing a jquery navigation system which can be found at this link: http://css-tricks.com/5582-jquery-magicline-navigation/ My goal is to have the navigation bar float to the right without changing the order of items (e.g. home, contac ...

jquerycssnavigationcss-float

Using JavaScript to apply styling on images with overlays

I am currently facing an issue with placing an overlay on top of a background image. Despite my efforts, I am unable to get the background color to appear on top of the image. Any helpful suggestions on how to resolve this would be greatly appreciated. M ...

javascriptcssreactjsmaterial-ui

Error in viewpoint/transformation transition on Microsoft Edge

Encountering a peculiar issue with MS Edge involving the animation of a door (a div tag) around the Y axis using the css rotateY() function in combination with perspective properties. The problem arises when transitioning an angle from a positive value to ...

csscss-transitionsmicrosoft-edgecss-transformsperspective