矩形不填充 svg 的宽度

Question

当您悬停链接时，我正在尝试做一些随着时间的推移出现的边框动画......但由于某种原因，我没有得到矩形并没有填充 svg 宽度并且结束看起来像这样：

这里可以看到sgv的宽度：

在这里你可以看到矩形宽度：

这是我的 HTML 和 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;
}

   

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

Answer 1

我不确定这是 svgs 的一个很好的用例。要在 svg 中准确定位和调整元素大小，它必须具有定义其比例的 viewBox 属性。 https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox svg 中的每个元素都相对于那些 viewBox 尺寸“绝对”定位。如果没有 viewBox，rect 元素无法知道其父 svg 容器的大小。为了做我认为你想做的事，你必须估计或计算每个菜单项的正确 viewBox 比例，并且由于它们（我假设）都可能有不同长度的单词，这很快就会变得无法维护。你打算最终用这些动画做一些非常精细的事情吗？如果不是，这听起来像是普通的 css 盒子模型更合适的情况，因为它的行为已经完全符合您的要求。

另外值得注意的是，矩形标签可以是自闭合的，并且 0 是这些标签的 x 和 y 的默认值，所以你的 rect 标记可以简单地是

 <rect fill="none" />

而且它的行为方式仍然相同。

最后，我总是建议人们使用 xmlns 属性明确定义 svg 标签的命名空间，

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

99% 的时间浏览器都会正确解释 svg，但如果您在 img 标签中使用 svgs，或者如果您的网页通过 HTML 被 Web 浏览器以外的其他东西使用，它将不知道如何正确解析 svg 并可能导致错误或显示问题。