我正在用svg世界地图制作一个迭代地图。它必须是SVG，因为我已经设置了一种放大和移动地图的方法。问题是：SVG覆盖了父div的阴影。
以下是CSS和HTML代码：
.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;
}
.map__image svg path{
fill: #035796;
stroke: rgba(255, 255, 255, .5);
stroke-width: 1px;
transition: fill 0.3s;
}
.map__image .is-active path{
fill:#4e87b3;
}
.svg {
z-index: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: ease-in 300ms;
border:none;
user-select:none;
display: block;
opacity: 0.9;
}
#pagecarte{
border-radius: 10px;
box-shadow: inset -2px -2px 6px rgba(255, 255, 255, .7),
inset -2px -2px 4px rgba(255, 255, 255, .5),
inset 2px 2px 2px rgba(255, 255, 255, .075),
inset 2px 2px 4px rgba(0, 0, 0, .15);
position: relative;
overflow: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#reset{
background: #efefef;
border: none;
border-radius: .5rem;
-webkit-tap-highlight-color: transparent;
color: #444;
font-size: 1rem;
font-weight: 700;
letter-spacing: .1rem;
font-family: Raleway;
text-align: center;
outline: none;
cursor: pointer;
user-select:none;
transition: .2s ease-in-out;
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);
padding:.8rem 1.2rem;
margin:0.8rem;
}
#reset:hover {
box-shadow: -2px -2px 6px rgba(255, 255, 255, .6),
-2px -2px 4px rgba(255, 255, 255, .4),
2px 2px 2px rgba(255, 255, 255, .05),
2px 2px 4px rgba(0, 0, 0, .1);
}
#reset:active {
box-shadow: inset -2px -2px 6px rgba(255, 255, 255, .7),
inset -2px -2px 4px rgba(255, 255, 255, .5),
inset 2px 2px 2px rgba(255, 255, 255, .075),
inset 2px 2px 4px rgba(0, 0, 0, .15);
}<html>
<head>
<meta charset="utf-8" />
<title>Test Carte Du Monde</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-我有一个javascript文件，负责处理"；是活动的"；类以及SVG缩放和平移
2-我在SVG部分有更多的路径，但为了这个例子，我只在中放了一个
我们需要将阴影放置在SVG上方，然后，最干净的解决方案是使用伪元素，将其添加到您的CSS 中
#pagecarte::before {
content: "";
z-index: 1; /* make sure it's above SVG */
position: absolute;
inset: 0;
pointer-events: none; /* so it does not interfere 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%)
}