html - 我们可以给 SVG 标签更高的 z-index 吗?
问题描述
我制作了一个具有透明背景的 SVG,并将其添加到我的 HTML 中的橙色框中,现在我尝试在我的框中添加另一个元素(如这里的蓝色框),同时我的 SVG 显示在蓝色框上; 但无论z-index
我给我的 SVG 和 a 有position: relative
多大,它都不会显示在我的蓝框上,这是我正在努力解决的问题,
欢迎任何可能的解决方案!
body {
background-color: olive;
}
.box {
width: 100px;
height: 100px;
background-color: orange;
position: relative;
}
.box:hover svg {
position: relative;
z-index: 10000;
display: block;
}
.box .cover {
width: 60px;
height: 60px;
background-color: blue;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<div class="cover"></div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:none;stroke:#FFFFFF;stroke-linecap:round;stroke-miterlimit:10;}
.st2{fill:#FFFFFF;stroke:#000000;stroke-linecap:round;stroke-miterlimit:10;}
</style>
<g>
<path class="st0" d="M30,54C16.77,54,6,43.23,6,30h1c0,12.68,10.32,23,23,23c12.68,0,23-10.32,23-23C53,17.32,42.68,7,30,7
C19.25,7,9.79,14.61,7.52,25.11c-0.06,0.27-0.32,0.44-0.59,0.38c-0.27-0.06-0.44-0.32-0.38-0.59C8.92,13.95,18.78,6,30,6
c13.23,0,24,10.77,24,24S43.23,54,30,54z"/>
</g>
<g>
<path class="st0" d="M30,49c-11.03,0-20-8.76-20-19.52c0-0.26,0.22-0.48,0.49-0.48c0.27,0,0.49,0.21,0.49,0.48
c0,10.24,8.53,18.57,19.02,18.57c10.49,0,19.02-8.33,19.02-18.57c0-0.26,0.22-0.48,0.49-0.48S50,29.21,50,29.48
C50,40.24,41.03,49,30,49z"/>
</g>
<g>
<g>
<path class="st0" d="M22.5,32.5c-1.93,0-3.5-2.02-3.5-4.5v-9c0-2.48,1.57-4.5,3.5-4.5S26,16.52,26,19v9
C26,30.48,24.43,32.5,22.5,32.5z M22.5,15.5c-1.35,0-2.5,1.6-2.5,3.5v9c0,1.9,1.15,3.5,2.5,3.5S25,29.9,25,28v-9
C25,17.1,23.85,15.5,22.5,15.5z"/>
</g>
</g>
<g>
<path class="st1" d="M41,28c0,2.2-1.35,4-3,4s-3-1.8-3-4v-9c0-2.2,1.35-4,3-4s3,1.8,3,4V28z"/>
</g>
<path class="st2" d="M27,1"/>
</svg>
</div>
</body>
</html>
解决方案
尝试将其放入您的 svg 中:
position:relative;
z-index:99;
推荐阅读
- matplotlib - Matplotlib 添加网格线未按预期工作
- javascript - 尝试使用正则表达式在字符串数组中查找子字符串的 url
- nginx - 用于网络不稳定补偿的 RTMP 缓冲区/中继
- postman - 如果测试失败,如何在邮递员中终止收集迭代
- c++ - 这是什么错误?"没有匹配的函数调用'foreach(std::array
&, 无效(&)(int))" - python - DataFrame 中唯一词的数量
- javascript - 在 JavaScript 中将 10 种颜色或十六进制颜色转换为 ANSI 颜色?
- python-3.x - Balanced KMeans:提供的尺寸数量必须大于或等于张量中的维度数量
- bash - 如何删除所有子目录?(Unix shell 脚本)
- alchemy-swift - Alchemy:获取 QueryBuilder 的原始 SQL 字符串