SVG 浮出它的锚容器

Question

如何修复并使其包含所有 SVG 图标。 还有plz plz，如何删除元素的下划线区域？？ photo for illustration

a {
  background-color: rgba(42, 165, 42, 0.596);
  text-decoration: none;
  display: inline-block;
}

svg {
  background-color: rgba(165, 42, 42, 0.596);
  height: 50px
}

<a href="#">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.28 16.28">
        <path
          d="M8.14 3.96a4.17 4.17 0 0 0-4.17 4.17 4.16 4.16 0 0 0 4.17 4.17 4.17 4.17 0 0 0 4.17-4.17A4.17 4.17 0 0 0 8.2 3.96zm0 6.88a2.71 2.71 0 1 1 0-5.42 2.71 2.71 0 0 1 2.71 2.71 2.72 2.72 0 0 1-2.71 2.72zm5.32-7a1 1 0 0 1-1.707.707 1 1 0 0 1 .707-1.707 1 1 0 0 1 1 1zm2.76 1a4.83 4.83 0 0 0-1.32-3.4A4.84 4.84 0 0 0 11.49.12a107.23 107.23 0 0 0-6.71 0 4.87 4.87 0 0 0-3.41 1.31A4.86 4.86 0 0 0 .05 4.84a107.55 107.55 0 0 0 0 6.72 4.86 4.86 0 0 0 1.32 3.41 4.79 4.79 0 0 0 3.41 1.23c1.34.08 5.37.08 6.71 0a4.79 4.79 0 0 0 3.41-1.3 4.86 4.86 0 0 0 1.3-3.41c.08-1.34.08-5.37 0-6.71zM14.48 13a2.76 2.76 0 0 1-1.54 1.55c-1.07.42-3.62.32-4.8.32s-3.73.1-4.8-.32A2.75 2.75 0 0 1 1.79 13c-.43-1.07-.33-3.62-.33-4.8s-.09-3.73.33-4.8a2.73 2.73 0 0 1 1.55-1.54c1.07-.43 3.61-.33 4.8-.33s3.73-.1 4.8.32a2.75 2.75 0 0 1 1.55 1.55c.42 1.07.32 3.62.32 4.8s.1 3.73-.33 4.8z"
        />
      </svg>
</a>

Answer 1

SVG 图标是 50px X 50px，但是由于 a 通常是内联元素它提供了一些额外的 space,
就像作为内联元素的文本一样，向上 space 向下
这导致浏览器认为 a 内的 ,svg 是内联元素，并给出 space.
完美地让a元素的宽高等于svg

将 display: inline-flex 添加到 parent 的 (a) css
将 display: inline-table 添加到 child 的 (svg) css

示例片段

a {
  background-color: rgba(42, 165, 42, 0.596);
  text-decoration: none;
  display: inline-flex;
}

svg {
  background-color: rgba(165, 42, 42, 0.596);
  height: 50px;
  display: inline-table;
}

<a href="#">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.28 16.28">
        <path
          d="M8.14 3.96a4.17 4.17 0 0 0-4.17 4.17 4.16 4.16 0 0 0 4.17 4.17 4.17 4.17 0 0 0 4.17-4.17A4.17 4.17 0 0 0 8.2 3.96zm0 6.88a2.71 2.71 0 1 1 0-5.42 2.71 2.71 0 0 1 2.71 2.71 2.72 2.72 0 0 1-2.71 2.72zm5.32-7a1 1 0 0 1-1.707.707 1 1 0 0 1 .707-1.707 1 1 0 0 1 1 1zm2.76 1a4.83 4.83 0 0 0-1.32-3.4A4.84 4.84 0 0 0 11.49.12a107.23 107.23 0 0 0-6.71 0 4.87 4.87 0 0 0-3.41 1.31A4.86 4.86 0 0 0 .05 4.84a107.55 107.55 0 0 0 0 6.72 4.86 4.86 0 0 0 1.32 3.41 4.79 4.79 0 0 0 3.41 1.23c1.34.08 5.37.08 6.71 0a4.79 4.79 0 0 0 3.41-1.3 4.86 4.86 0 0 0 1.3-3.41c.08-1.34.08-5.37 0-6.71zM14.48 13a2.76 2.76 0 0 1-1.54 1.55c-1.07.42-3.62.32-4.8.32s-3.73.1-4.8-.32A2.75 2.75 0 0 1 1.79 13c-.43-1.07-.33-3.62-.33-4.8s-.09-3.73.33-4.8a2.73 2.73 0 0 1 1.55-1.54c1.07-.43 3.61-.33 4.8-.33s3.73-.1 4.8.32a2.75 2.75 0 0 1 1.55 1.55c.42 1.07.32 3.62.32 4.8s.1 3.73-.33 4.8z"
        />
      </svg>
</a>

SVG 浮出它的锚容器

SVG floating out it's Anchor container

html

css

anchor

containers

overflow

示例片段