Rect doesn't fill svg's width

Question

I'm trying to do some animation of the border appearing through time while you hover a link... But for some reason I dont get the rect doesnt fill the svg width and end looking like this:

enter image description here

Here you can see the sgv width:

enter image description here

And here you can see rect width:

enter image description here

HERE ARE MY HTML AND CSS

HTML:

    <!--Navigation bar-->
<div class="nav-container">
  <!--Right nav items-->
  <span class="nav-left-side">
    <i class="fas fa-code">&nbsp;</i>Title
  </span>
  <!--Center nav items-->
  <div class="nav-menu-container">
    <!--Home-->
    <div class="nav-link-container">
      <a href="/">
        <span><i class="fas fa-home">&nbsp;</i>Home</span>
      </a>
      <svg>
        <rect x="0" y="0" fill="none"></rect>
      </svg>
    </div>
    <!--Contact me-->
    <div class="nav-link-container">
      <a href="/contact">
        <span><i class="fas fa-headset">&nbsp;</i>Contact me</span>
      </a>
      <svg>
        <rect x="0" y="0" fill="none"></rect>
      </svg>
    </div>
    <!--About me-->
    <div class="nav-link-container">
      <a href="/about">
        <span><i class="fas fa-gamepad">&nbsp;</i>About me</span>
      </a>
      <svg>
        <rect x="0" y="0" fill="none"></rect>
      </svg>
    </div>
    <!--Flex box-->
    <div class="nav-link-container">
      <a href="/flex-box">
        <span><i class="fas fa-code-branch">&nbsp;</i>Flex box</span>
      </a>
      <svg>
        <rect x="0" y="0" fill="none"></rect>
      </svg>
    </div>
  </div>
  <!--Left nav items-->
  <span class="nav-right-side"> <i class="fas fa-search">&nbsp;</i>Seach </span>
</div>

CSS:

.nav-container {
  background-color: #1f1d36;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  border-radius: 0 0 15px 15px;
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  justify-items: center;
  align-items: center;
}

.nav-menu-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 65%;
  height: 30px;
}

.nav-link-container {
  position: relative;
  border-radius: 5px;
  opacity: 0.55;
  padding: 5px;
  transition: 0.6s ease all;
  overflow: hidden;
}

.nav-link-container svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  fill: none;
}

.nav-link-container rect {
  width: 100%;
  height: 100%;
  position: absolute;
  stroke: #3f3351;
  stroke-width: 4px;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: 0.6s ease all;
}

Thank you for read (:

Answer 1

I'm not sure this is a good use case for svgs. To position and size elements within an svg accurately, it has to have a viewBox attribute that defines its proportions. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox Every element within an svg is positioned "absolutely" relative to those viewBox dimensions. Without a viewBox, the rect elements have no way of knowing what their parent svg containers size is. To do what I think you want to do, you would have to estimate or calculate the right viewBox proportions for each menu item, and since they all (i assume) might have words of varying length, that would quickly become unmaintainable. Are you planning on eventually doing something very elaborate with these animations? If not, this sounds like a situation where the normal css box model would be far more appropriate, since it already behaves exactly like what you want.

Also worth noting that rect tags can be self closing, and that 0 is the default value for x & y for those tags, so your rect markup could simply be

 <rect fill="none" />

And it would still behave the same way.

Lastly, i always suggest people explicitly define the namespace for the svg tags with the xmlns attribute,

<svg xmlns="http://www.w3.org/2000/svg"  ... 

99% of the time the browser will properly interpret the svg regardless, but if you use svgs in an img tag, or if your webpage is consumed by something other than a web browser via HTML, it won't know how to parse the svg properly and can cause errors or display issues.