圖示影片不顯示？

好吧，我有一個使用 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>

uj5u.com熱心網友回復：

他們使用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>

更新

在第一個示例中，圖示下方有一個不應該存在的空間......在下面的示例中，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>

標籤：

上一篇：GSAP/CSS變換原點和毛刺懸停效果/SVG區域

下一篇：以編程方式減去SVG路徑