css svg shrink wrapped to div for hover pseudo class

Question

I want to put around a circle, 3 arcs that pop out a bit when hovered on. The only way I found to make these arcs was by hand with svg. however, I cant seem to make the div the svg is in to be approx. the size of the svg. Tried width and height 100% but doesn't work. The div hovered on doesnt have to be EXACTLY the arc size. (The red background-color was to get a reference as to what the div is occupying)

*{
    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>

some CSS ideas: https://stackoverflow.com/a/56799618/8620333 — Temani Afif, Mar 10 '21 at 23:25
@Temani Afif wow that's perfect! fit exactly what I needed and worked perfectly fine! thanks a lot man :) — samervjr, Mar 11 '21 at 17:36
@Temani Afif I used the method you linked a couple of weeks ago. It's working wonders, but I am unable to add text or anything else inside the individual arcs. I'm guessing there is a very logical reason to why this is happening that I am not aware of. I tried placing my text on top of it with position absolute but can't use the hyperlinks I added to each arc. Do you know how I can achieve this? Thanks you :) — samervjr, Mar 17 '21 at 17:20
can you show me the code you have now so I can see the issue? — Temani Afif, Mar 17 '21 at 17:42
@Temani Afif '.palette { --g:30px; --s:100px; height: 600px; width: 600px; position:relative; display:inline-block; overflow:hidden; margin-top: 50px; } .logout-arc, .saved-arc, .settings-arc { position:absolute; top:0; left:0; right:0; bottom:0; border:var(--s) solid var(--c,red); border-radius:50%; clip-path:polygon( calc(50% + var(--g)/2) 50%, calc(50% + var(--g)/2) 0%, 100% 0%, 100% calc(78.665% - var(--g)/2), 50% calc(50% - var(--g)/2)); }' — samervjr, Mar 20 '21 at 14:36

score 0 · Answer 1 · answered Mar 11 '21 at 04:47

One way to do it with a single SVG would be

.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>

Needs testing and only works in modern browsers (the r circle radius has only been supported by browsers recently due to inclusion in SVG 2).

If you need this over a coloured background or image, then convert the lines to a https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask and apply to outer circle. May be better to implement as scale(...) rather than changing radius ... hmm — Ruskin, Mar 11 '21 at 04:49

css svg shrink wrapped to div for hover pseudo class

1 Answers1