【发布时间】：2021-06-08 23:02:28
【问题描述】：
我想绕一个圆圈，3 条弧线在悬停时会弹出一点。我发现制作这些弧线的唯一方法是使用 svg 手工制作。但是，我似乎无法将 svg 所在的 div 设为大约。 svg 的大小。尝试了宽度和高度 100% 但不起作用。悬停的 div 不必完全是弧的大小。 （红色背景色是为了获取 div 占用的参考）
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
main {
position: relative;
width: 500px;
height: 500px;
margin-top: 6em;
}
.settings-arc, .saved-arc, .logout-arc {
position: absolute;
}
.picture-circle {
position: absolute;
width: 225px;
height: 225px;
border-radius: 50%;
background-color: black;
top: 114px;
left: 140px;
}
.settings-arc {
/*background-color: red;*/
}
.saved-arc {
}
.logout-arc {
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile</title>
<link rel="stylesheet" href="css/profile.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
</head>
<body>
<main>
<div class="picture-circle">
</div>
<div class="settings-arc">
<svg height="500px" width="500px">
<path stroke="black" stroke-width=".2" d="M260,50 l0,51 q120,19 113,150 l52,0 q7,-185 -166,-202"></path>
</svg>
</div>
<div class="saved-arc">
<svg height="500px" width="500px">
<path stroke="black" stroke-width=".2" d="M243,49 l0,54 q-117,13 -118,148 l-50,1 q-4,-185 168,-203"></path>
</svg>
</div>
<div class="logout-arc">
<svg height="500px" width="500px">
<path stroke="black" stroke-width=".2" d="M74.84375,262 l51.15625,0 q23,87 124,89 q99,-3 124,-89 l52,0 q-26,137 -175.15625,139 q-150.84375,-3 -174.84375,-139"></path>
</svg>
</div>
</main>
</body>
</html>【问题讨论】：
-
一些 CSS 想法：stackoverflow.com/a/56799618/8620333
-
@Temani Afif 哇，太完美了！完全符合我的需要并且工作得很好！非常感谢人:)
-
@Temani Afif 我使用了几周前您链接的方法。它创造了奇迹，但我无法在各个弧内添加文本或其他任何内容。我猜有一个非常合乎逻辑的原因导致我不知道为什么会发生这种情况。我尝试用绝对位置将我的文本放在它上面，但不能使用我添加到每个弧的超链接。你知道我怎么能做到这一点吗？谢谢你:)
-
你能告诉我你现在拥有的代码，以便我看到问题吗？
-
@Temani Afif '.palette { --g:30px; --s：100像素；高度：600px；宽度：600px；位置：相对；显示：内联块；溢出：隐藏；边距顶部：50px； } .logout-arc，.saved-arc，.settings-arc { 位置：绝对；顶部：0；左：0；对：0；底部：0；边框：var(--s) 实心 var(--c,red);边界半径：50%；剪辑路径：多边形（计算（50% + var（--g）/2）50%，计算（50% + var（--g）/2）0%，100% 0%，100% 计算（78.665 % - var(--g)/2), 50% 计算(50% - var(--g)/2)); }'