用於網站的Apple Touch Bar收藏夾圖標不起作用

Question

因此，我正在建立一個網站，當我將該網站添加到我的收藏夾列表中時，無法在MacBook的Touch Bar上正確顯示svg圖標。

有問題的網頁可以在這里找到： http : //japesfawcett.com

我有一個在白色背景上是黑色雷電的SVG文件，並且我在Touch Bar圖標上使用以下代碼：

<link rel="mask-icon" href="img/favicon.svg" color="#000000">

SVG的代碼如下：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 100 100;" xml:space="preserve">
    <style type="text/css">
        .st0{fill:#231F20;}
    </style>
    <path class="st0" d="M41.3,45.9c2.4,1.6,4.6,0.3,7.4,0.1c-1.7,3.4-3.3,6.5-4.8,9.6c-0.6,1.3-0.9,2.8-1.5,4.1  c-0.6,1.3-1.4,2.5-1.9,3.8c-2.2,5.2-4,10.6-6.6,15.5c-2,3.7-2.7,7.6-4.4,11.6c0.9,0.5,1.8,0.9,2.9,1.4c4.6-6.2,9.2-12.3,13.7-18.5  c4.8-6.4,8.3-13.5,11.9-20.6c1.6-3.2,4.1-6.1,6.4-8.9c2.6-3.2,5.4-6.1,6.2-10.3c-4-2.7-8.7-1.7-13.3-2c2.2-6.7,4.2-13.1,6.3-19.6  c0.5-1.4,1-2.8-0.6-4.1c-4.4,1.1-6.1,5-8.1,8.4c-2.7,4.6-5,9.4-7.5,14.1c-1,1.8-2.1,3.4-3.1,5.2C42.5,38.7,41.3,42,41.3,45.9z"/>
</svg>

由於某種原因，該網站的“觸摸欄”圖標顯示為全白，其中看不到任何圖像。 我根本看不到SVG！

如果有人對如何解決此問題有任何見解，將不勝感激，這讓我發瘋了！

Answer 1

看來問題出在您的SVG上，該SVG 裁剪不正確 （在viewBox定義的16x16像素范圍之外）。 用以下內容替換其中的路徑：

<path class="st0" d="M2.29683698,7.21904762 C2.76399027,7.52380952 3.19221411,7.27619048 3.73722628,7.23809524 C3.40632603,7.88571429 3.09489051,8.47619048 2.80291971,9.06666667 C2.68613139,9.31428571 2.62773723,9.6 2.51094891,9.84761905 C2.39416058,10.0952381 2.23844282,10.3238095 2.14111922,10.5714286 C1.71289538,11.5619048 1.36253041,12.5904762 0.856447689,13.5238095 C0.467153285,14.2285714 0.330900243,14.9714286 0,15.7333333 C0.175182482,15.8285714 0.350364964,15.9047619 0.564476886,16 C1.45985401,14.8190476 2.35523114,13.6571429 3.23114355,12.4761905 C4.16545012,11.2571429 4.84671533,9.9047619 5.54744526,8.55238095 C5.85888078,7.94285714 6.34549878,7.39047619 6.79318735,6.85714286 C7.29927007,6.24761905 7.84428224,5.6952381 8,4.8952381 C7.22141119,4.38095238 6.30656934,4.57142857 5.41119221,4.51428571 C5.83941606,3.23809524 6.22871046,2.01904762 6.63746959,0.780952381 C6.73479319,0.514285714 6.83211679,0.247619048 6.52068127,0 C5.66423358,0.20952381 5.33333333,0.952380952 4.94403893,1.6 C4.41849148,2.47619048 3.97080292,3.39047619 3.48418491,4.28571429 C3.28953771,4.62857143 3.07542579,4.93333333 2.88077859,5.27619048 C2.53041363,5.84761905 2.29683698,6.47619048 2.29683698,7.21904762 Z"></path>

另外， 圖標應該是完全黑色的 ，因此您應該更改st0類的fill屬性：

.st0{fill:#000;}