链接悬停描边动画异常：SVG内rect元素未占满父容器全宽如何解决

解决方案 #

你遇到的rect无法填充满SVG的问题核心是SVG缺少自适应配置、给SVG内部元素错误添加了CSS定位规则，按以下步骤修改即可实现预期的悬停边框动画效果：

• 给所有<svg>标签添加viewBox="0 0 100 100"和preserveAspectRatio="none"属性，允许SVG跟随容器尺寸自由拉伸，填满整个导航项容器
• 删除给rect设置的position: absoluteCSS属性，SVG内部元素使用自身坐标系统定位，不需要CSS布局规则
• 给rect标签直接设置width="100" height="100"属性，同时添加rx="5"匹配导航项的圆角样式
• 补充悬停触发的样式规则，悬停时将stroke-dashoffset设为0，同时调高容器透明度增强效果

完整修改后代码 #

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:hover {
  opacity: 1;
}

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

.nav-link-container rect {
  width: 100%;
  height: 100%;
  stroke: #3f3351;
  stroke-width: 4px;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: 0.6s ease all;
}
/* 新增悬停时边框动画触发 */
.nav-link-container:hover rect {
  stroke-dashoffset: 0;
}

HTML代码

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!--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 viewBox="0 0 100 100" preserveAspectRatio="none">
            <rect x="0" y="0" width="100" height="100" rx="5" 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 viewBox="0 0 100 100" preserveAspectRatio="none">
            <rect x="0" y="0" width="100" height="100" rx="5" 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 viewBox="0 0 100 100" preserveAspectRatio="none">
            <rect x="0" y="0" width="100" height="100" rx="5" 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 viewBox="0 0 100 100" preserveAspectRatio="none">
            <rect x="0" y="0" width="100" height="100" rx="5" fill="none"></rect>
          </svg>
    </div>
  </div>
  <!--Left nav items-->
  <span class="nav-right-side"> <i class="fas fa-search">&nbsp;</i>Search </span>
</div>

内容的提问来源于stack exchange，提问作者Luis Sulbarán