How to have the green circle fill the entirety underneath the blue circle

[asasass]

Right now the green circle is not under the blue circle, how do I do that?

I’m stuck trying to figure this out. https://jsfiddle.net/3xe2utj1/

.exit {
  width: 47.63px;
  height: 47.63px;
  border: none;
  background: transparent;
  border-radius: 100%;
}

.exitsvg {
  fill: none;
  fill-rule: evenodd;
  stroke: #ff0000;
  stroke-width: 17.80202103;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  stroke-dasharray: none;
  stroke-opacity: 1;
  border: 4.625px solid blue;
  border-radius: 100%;
  pointer-events: none;
}

circle {
  stroke: transparent;
  cursor: pointer;
}

       <div class="exit" tabindex="0" role="button" aria-pressed="false" aria-label="Close">
         <svg class="exitsvg" role="button" width="38.39" height="38.39" viewBox="0 0 100 100" pointer-events="none">
           <g id="exit">
             <title>exit</title>
             <circle cx="50" cy="50" r="50" fill="green" pointer-events="visiblePainted" />
             <path d="M 6.3895625,6.4195626 C 93.580437,93.610437 93.580437,93.610437 93.580437,93.610437" />
             <path d="M 6.3894001,93.6106 C 93.830213,6.4194003 93.830213,6.4194003 93.830213,6.4194003" />
           </g>
         </svg>
       </div>

[Archibald]

Simply use two circle elements and two line elements:

[asasass]

Would I be able to do this keeping svg path? https://jsfiddle.net/3xe2utj1/

<div class="exit" tabindex="0" role="button" aria-pressed="false" aria-label="Close">
         <svg class="exitsvg" role="button" width="38.39" height="38.39" viewBox="0 0 100 100" pointer-events="none">
           <g id="exit">
             <title>exit</title>
             <circle cx="50" cy="50" r="50" fill="green" pointer-events="visiblePainted" />
             <path d="M 6.3895625,6.4195626 C 93.580437,93.610437 93.580437,93.610437 93.580437,93.610437" />
             <path d="M 6.3894001,93.6106 C 93.830213,6.4194003 93.830213,6.4194003 93.830213,6.4194003" />
           </g>
         </svg>
       </div>

[Archibald]

Why don’t you have the blue circle within the SVG?

Why keep the SVG paths when all you need is two lines?

[asasass]

Thank you for your help.

I’m going to see what I can do and will report back with what I am able to come up with.

[alexwalker]

Have to agree with @Archibald. Having most of the graphic in SVG but the blue outline in CSS means you switching rendering systems mid graphic. Which isn’t technically wrong - and there may be edge-cases where it makes sense - but for consistency and long term maintenance reasons, I’d probably keep in all in the same file (either CSS or SVG).

Stacking it like this with the cross as the meat in a circle sandwich. You can make the blue circle overlap the other shapes, so it’s impossible to get tiny fit issues like your original problem.