问css svg收缩包装到div以用于悬停伪类
EN

Stack Overflow用户

提问于 2021-03-11 07:20:09

回答 1查看 32关注 0票数 1

我想围绕一个圆圈，三个圆弧，当悬停时会弹出一点。我发现制作这些弧线的唯一方法是用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>

html

css

svg

回答 1

Stack Overflow用户

发布于 2021-03-11 12:47:15

使用单个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>

需要测试，并且只能在现代浏览器中工作(由于包含在SVG2中，r圆半径最近才被浏览器支持)。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66574302

复制

相似问题

问css svg收缩包装到div以用于悬停伪类
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css svg收缩包装到div以用于悬停伪类EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css svg收缩包装到div以用于悬停伪类
EN