SVG图标在Mozilla Firefox中无法显示的技术求助
问题排查与修复方案
你的SVG在Firefox中显示异常的核心原因是标签拼写错误,具体问题和修复方案如下:
1. 错误点定位
在<defs>区块中,你使用了错误的标签<cli-path>,正确的SVG剪切路径标签应为<clipPath>(注意完整拼写和驼峰写法)。Firefox对SVG标准标签的语法校验更为严格,这个拼写错误会导致剪切路径无法生效,进而影响整个图形的显示。
2. 修复后的完整SVG代码
<svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'> <g clip-path='url(#clip0_4_140)' filter='url(#filter0_i_4_140)'> <path d='M25 10H7C6.20462 10.0009 5.44206 10.3172 4.87964 10.8796C4.31722 11.4421 4.00087 12.2046 4 13V19C4.00061 19.5302 4.21152 20.0386 4.58646 20.4135C4.9614 20.7885 5.46975 20.9994 6 21V28C6.00061 28.5302 6.21152 29.0386 6.58646 29.4135C6.9614 29.7885 7.46975 29.9994 8 30H12C12.5302 29.9994 13.0386 29.7885 13.4135 29.4135C13.7885 29.0386 13.9994 28.5302 14 28V16H12V28H8V19H6V13C6.00024 12.7349 6.10567 12.4806 6.29316 12.2932C6.48064 12.1057 6.73486 12.0002 7 12H25C25.2651 12.0002 25.5194 12.1057 25.7068 12.2932C25.8943 12.4806 25.9998 12.7349 26 13V19H24V28H20V16H18V28C18.0006 28.5302 18.2115 29.0386 18.5865 29.4135C18.9614 29.7885 19.4698 29.9994 20 30H24C24.5302 29.9994 25.0386 29.7885 25.4135 29.4135C25.7885 29.0386 25.9994 28.5302 26 28V21C26.5302 20.9994 27.0386 20.7885 27.4135 20.4135C27.7885 20.0386 27.9994 19.5302 28 19V13C27.9991 12.2046 27.6828 11.4421 27.1204 10.8796C26.5579 10.3172 25.7954 10.0009 25 10Z' fill='#9BA9BA' /> <path d='M10 9C9.20888 9 8.43552 8.76541 7.77772 8.32588C7.11992 7.88635 6.60723 7.26164 6.30448 6.53074C6.00173 5.79983 5.92252 4.99556 6.07686 4.21964C6.2312 3.44372 6.61216 2.73098 7.17157 2.17157C7.73098 1.61216 8.44372 1.2312 9.21964 1.07686C9.99556 0.92252 10.7998 1.00173 11.5307 1.30448C12.2616 1.60723 12.8864 2.11992 13.3259 2.77772C13.7654 3.43552 14 4.20888 14 5C13.9989 6.06053 13.5771 7.0773 12.8272 7.8272C12.0773 8.57711 11.0605 8.99889 10 9ZM10 3C9.60444 3 9.21776 3.1173 8.88886 3.33706C8.55996 3.55683 8.30362 3.86918 8.15224 4.23463C8.00087 4.60009 7.96126 5.00222 8.03843 5.39018C8.1156 5.77814 8.30608 6.13451 8.58579 6.41422C8.86549 6.69392 9.22186 6.8844 9.60982 6.96157C9.99778 7.03874 10.3999 6.99914 10.7654 6.84776C11.1308 6.69639 11.4432 6.44004 11.6629 6.11114C11.8827 5.78224 12 5.39556 12 5C11.9994 4.46976 11.7885 3.9614 11.4135 3.58646C11.0386 3.21152 10.5302 3.00061 10 3Z' fill='#9BA9BA' /> <path d='M22 9C21.2089 9 20.4355 8.76541 19.7777 8.32588C19.1199 7.88635 18.6072 7.26164 18.3045 6.53074C18.0017 5.79983 17.9225 4.99556 18.0769 4.21964C18.2312 3.44372 18.6122 2.73098 19.1716 2.17157C19.731 1.61216 20.4437 1.2312 21.2196 1.07686C21.9956 0.92252 22.7998 1.00173 23.5307 1.30448C24.2616 1.60723 24.8864 2.11992 25.3259 2.77772C25.7654 3.43552 26 4.20888 26 5C25.9989 6.06053 25.5771 7.0773 24.8272 7.8272C24.0773 8.57711 23.0605 8.99889 22 9ZM22 3C21.6044 3 21.2178 3.1173 20.8889 3.33706C20.56 3.55683 20.3036 3.86918 20.1522 4.23463C20.0009 4.60009 19.9613 5.00222 20.0384 5.39018C20.1156 5.77814 20.3061 6.13451 20.5858 6.41422C20.8655 6.69392 21.2219 6.8844 21.6098 6.96157C21.9978 7.03874 22.3999 6.99914 22.7654 6.84776C23.1308 6.69639 23.4432 6.44004 23.6629 6.11114C23.8827 5.78224 24 5.39556 24 5C23.9994 4.46976 23.7885 3.9614 23.4135 3.58646C23.0386 3.21152 22.5302 3.00061 22 3Z' fill='#9BA9BA' /> </g> <defs> <filter id='filter0_i_4_140' x='0' y='0' width='32' height='32' filter-units='userSpaceOnUse' color-interpolation-filters='sRGB'> <feFlood flood-opacity='0' result='BackgroundImageFix' /> <feBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape' /> <feColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha' /> <feOffset /> <feGaussianBlur stdDeviation='2' /> <feComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1' /> <feColorMatrix type='matrix' values='0 0 0 0 0.55 0 0 0 0 0.55 0 0 0 0 0.55 0 0 0 0.5 0' /> <feBlend mode='normal' in2='shape' result='effect1_innerShadow_4_140' /> </filter> <clipPath id='clip0_4_140'> <rect width='32' height='32' fill='white' /> </clipPath> </defs> </svg>
额外说明
- Chrome、Safari等浏览器对SVG标签拼写错误的容错性更高,因此能正常显示,但Firefox严格遵循SVG标准,无法识别错误标签导致显示异常。
- 你提到的
d属性并非问题根源,该属性的路径数据在各浏览器中解析规则一致,此次问题完全由标签拼写错误引发。
内容的提问来源于stack exchange,提问作者Newcomer
相关产品推荐
相关产品推荐

