时间戳

首页 > 解决方案 > css svg 收缩包装到 div 用于悬停伪类

html - css svg 收缩包装到 div 用于悬停伪类

问题描述

我想绕一个圆圈，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>

标签： htmlcsssvg

解决方案

使用单个 SVG 的一种方法是

.circle-inner {
  r: 50;
  transition: 0.3s ease-in-out;
}

.circle-outer {
  r: 70;
  fill: none;
  stroke: currentColor;
  stroke-width: 20;
  transition: 0.3s ease-in-out;
}

line[class^=path-line-] {
  fill: none;
  stroke-width: 10;
  stroke: white;
  transition: 0.3s ease-in-out;
}

.svg-hoverable {
  pointer-events: bounding-box;
}

.svg-hoverable:hover .circle-outer {
  r: 75;
  stroke: tomato;
}

.svg-hoverable:hover line[class^=path-line-] {
  stroke-width: 11;
}
<svg width="200" height="200" viewBox="-100 -100 200 200" class="svg-hoverable">
  <circle class="circle-outer"/>
  <line class="path-line-h" x1="-100" x2="100" />
  <line class="path-line-v" y1="-100" />
  <circle class="circle-inner"/>
</svg>

需要测试并且仅适用于现代浏览器（r由于包含在 SVG 2 中，最近浏览器才支持圆半径）。

推荐阅读