图标动画不显示？

Question

好吧，我有一个使用 Photoshop 制作的 SVG 图标，我确实有代码，但是当我使用这个 Bootstrap 模板将它放入我的导航栏时 (https://getbootstrap.com/docs/5.1/examples/product/#) 图标不发光或具有相同的属性我该如何解决？

我的 SVG 图标

<svg xmlns="http://www.w3.org/2000/svg"
 width="1000.000000pt" height="1000.000000pt" viewBox="0 0 1000.000000 1000.000000"
 preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,1000.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M1465 9480 c-500 -106 -877 -501 -954 -1000 -9 -56 -11 -942 -9
-3525 l3 -3450 26 -96 c123 -444 434 -755 878 -878 l96 -26 3495 0 3495 0 96
26 c465 129 795 477 889 938 20 98 20 130 20 3531 0 3401 0 3433 -20 3531 -94
461 -424 809 -889 938 l-96 26 -3470 2 c-3372 2 -3473 1 -3560 -17z m3740
-2030 c706 -81 1213 -495 1375 -1123 44 -170 54 -255 54 -452 0 -138 -4 -200
-18 -265 -97 -447 -410 -832 -863 -1063 -96 -49 -103 -54 -103 -82 0 -23 142
-233 645 -950 526 -752 644 -926 645 -952 l0 -33 -619 0 -619 0 -623 890 -623
890 -148 0 -148 0 0 -890 0 -890 -540 0 -540 0 0 2465 0 2465 1018 0 c630 0
1051 -4 1107 -10z"/>
<path d="M4160 5885 l0 -587 453 5 c504 5 521 7 651 75 128 67 229 191 272
337 22 74 25 245 5 325 -23 96 -80 200 -146 265 -72 71 -136 108 -242 137 -73
20 -106 22 -535 26 l-458 4 0 -587z"/>
</g>
</svg>

提到的导航栏的 SVG 图标：

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mx-auto" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg>

Answer 1

他们在图标的描边和填充上使用值 currentColor。它将更改与上下文匹配的 SVG 的笔触和填充。在此示例中，上下文是 <a>，它会在悬停时改变颜色。

nav {
  background-color: black;
  padding: .2em;
}

a {
  color: #8e8e8e;
  transition: color .15s ease-in-out;
}

a:hover {
  color: #FFF;
}

<nav>
  <a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 1000.000000 1000.000000" preserveAspectRatio="xMidYMid meet">
      <g transform="translate(0.000000,1000.000000) scale(0.100000,-0.100000)"
fill="currentColor" stroke="none">
        <path d="M1465 9480 c-500 -106 -877 -501 -954 -1000 -9 -56 -11 -942 -9
-3525 l3 -3450 26 -96 c123 -444 434 -755 878 -878 l96 -26 3495 0 3495 0 96
26 c465 129 795 477 889 938 20 98 20 130 20 3531 0 3401 0 3433 -20 3531 -94
461 -424 809 -889 938 l-96 26 -3470 2 c-3372 2 -3473 1 -3560 -17z m3740
-2030 c706 -81 1213 -495 1375 -1123 44 -170 54 -255 54 -452 0 -138 -4 -200
-18 -265 -97 -447 -410 -832 -863 -1063 -96 -49 -103 -54 -103 -82 0 -23 142
-233 645 -950 526 -752 644 -926 645 -952 l0 -33 -619 0 -619 0 -623 890 -623
890 -148 0 -148 0 0 -890 0 -890 -540 0 -540 0 0 2465 0 2465 1018 0 c630 0
1051 -4 1107 -10z"/>
        <path d="M4160 5885 l0 -587 453 5 c504 5 521 7 651 75 128 67 229 191 272
337 22 74 25 245 5 325 -23 96 -80 200 -146 265 -72 71 -136 108 -242 137 -73
20 -106 22 -535 26 l-458 4 0 -587z"/>
      </g>
    </svg>
  </a>
</nav>

更新

在第一个示例中，图标下方有 space，而该图标不应存在...在下面的示例中，SVG 具有 CSS 属性 display: block;.现在它的行为......我还为图标做了一个更简单的路径（只是为了它的乐趣而不是完美）。

nav {
  background-color: black;
  padding: .2em;
}

a {
  color: #8e8e8e;
  transition: color .15s ease-in-out;
}

svg {
  display: block;
}

a:hover {
  color: #FFF;
}

<nav>
  <a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 45 45">
      <path fill="currentColor" stroke="none" d="M 4 0 A 5 5 90 0 0 0 5 L 0 40 A 5 5 90 0 0 4 45 L 40 45 A 5 5 90 0 0 45 40 L 45 4 A 5 5 90 0 0 41 0 Z M 22 10 C 32 10 34 22 25 25 C 31 33 32 34 32 34 L 32 34 L 26 34 L 19 25 L 18 25 L 18 34 L 13 34 L 13 10 L 22 10 M 18 15 L 18 21 L 22 21 A 1 1 90 0 0 22 15 Z"/>
    </svg>
  </a>
</nav>

图标动画不显示？

Icon animation not showing?

html

svg

更新