网站添加到MacBook Touch Bar收藏夹后SVG图标无法显示

Let's break down why your Touch Bar icon is showing up all white and walk through how to fix it:

The Core Problem #

Your SVG's viewBox is set to 0 0 16 16, but every coordinate in your path (d attribute) sits far outside this 16x16 area (like M41.3,45.9). That means the actual lightning shape is completely hidden outside the SVG's visible viewport—so the Touch Bar has no valid mask to apply your #000000 color to, resulting in a blank white icon.

Step-by-Step Fixes #

1. Make Your Path Visible in the SVG #

You have two straightforward ways to fix the viewport mismatch:

Option A: Scale the Path to Fit the 16x16 ViewBox

Resize all the path coordinates so they fit within the 0-16 range for both x and y axes. Here's a pre-scaled version of your lightning SVG that works with the original 16x16 viewbox:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path d="M11.8,13.1c0.7,0.5,1.3,0.1,2.1,0c-0.5,1-0.9,1.8-1.3,2.7c-0.2,0.4-0.3,0.8-0.4,1.2c-0.2,0.4-0.4,0.7-0.5,1.1c-0.6,1.5-1.1,3-1.9,4.4c-0.6,1.1-0.8,2.2-1.3,3.3c0.3,0.1,0.5,0.3,0.8,0.4c1.3-1.8,2.6-3.5,3.9-5.3c1.4-1.8,2.3-3.9,3.4-5.9c0.5-0.9,1.2-1.7,1.8-2.5c0.7-0.9,1.5-1.7,1.8-2.9c-1.1-0.8-2.5-0.5-3.8-0.6c0.6-1.9,1.2-3.7,1.8-5.6c0.1-0.4,0.3-0.8-0.2-1.2c-1.2,0.3-1.7,1.4-2.3,2.4c-0.8,1.3-1.4,2.6-2.1,4c-0.3,0.5-0.6,1-0.9,1.5C12.1,10.9,11.8,11.9,11.8,13.1z" fill="#000"/>
</svg>

Option B: Update the ViewBox to Match the Path's Bounds

If you want to keep your original path coordinates, adjust the viewBox to match the actual size of your lightning shape. From your code, the path spans roughly 0 to 55 on both axes, so change the viewbox to viewBox="0 0 55 55"—this will make the entire lightning visible in the SVG.

2. Simplify the SVG for Mask-Icon Compatibility #

Touch Bar's mask-icon only uses the shape of your SVG (via its alpha channel)—any fill colors in the SVG will be ignored, and the color you set in the <link> tag (color="#000000") will be applied instead. So you can clean up the code by:

• Removing unnecessary namespaces like xmlns:xlink
• Deleting the embedded CSS style (.st0{fill:#231F20;})
• Ensuring the path has a solid, non-transparent fill (black works best for mask visibility)

3. Double-Check Your Setup #

Quick verification steps:

• Confirm the href in your <link> tag points to the correct file location (e.g., img/favicon.svg is accessible from your site's root)
• Make sure your server serves the SVG with the correct Content-Type: image/svg+xml header—this ensures macOS recognizes it properly

Testing the Fix #

After updating your SVG file on the server:

1. Remove the site from your Touch Bar favorites
2. Re-add it
3. Restart your browser if the change doesn't show up right away

内容的提问来源于stack exchange，提问作者Cavs28