Question

所以我建立一个网站，当我将网站添加到我的收藏列表时，我无法在我的MacBook的触控栏上正确显示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，错误裁剪（它超出了<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>定义的16x16像素范围）。用以下内容替换其中的路径：

fill

另外，the icon should be completely black，因此您应该更改st0类的.st0{fill:#000;}属性：

if (debug === true) {
  console.log('dev')
}

苹果触摸栏收藏夹图标网站不工作

1 个答案: