矩形不填充 svg 的宽度

Question

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

在此处输入图片说明

在这里您可以看到 sgv 宽度：

在此处输入图片说明

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

在此处输入图片说明

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

感谢您阅读（：

Answer 1

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

还值得注意的是 rect 标签可以自动关闭，并且 0 是这些标签的 x & y 的默认值，因此您的 rect 标记可以简单地为

 <rect fill="none" />

它仍然会以同样的方式运行。

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

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

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