css Mozilla Firefox中未显示svg图标[关闭]

hrirmatl  于 2023-04-01  发布在  其他
关注(0)|答案(2)|浏览(155)

**已关闭。**此问题为not reproducible or was caused by typos。当前不接受答案。

这个问题是由打字错误或无法再重现的问题引起的。虽然类似的问题在这里可能是on-topic,但这个问题的解决方式不太可能帮助未来的读者。
2天前关闭。
Improve this question
我有一个SVG图标,在其他浏览器如Chrome,Opera和Safari中工作正常,但Mozilla有问题。下面是我的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>
    <cli-path id='clip0_4_140'>
        <rect width='32' height='32' fill='white' />
    </cli-path>
</defs>
</svg>

我读到属性'd'与它有关,但我有其他SVG具有此属性并在Mozilla中正常工作

0pizxfdo

0pizxfdo1#

问题似乎是defs部分中的cli-path,简单地删除它,然后SVG就可以工作了。

ttvkxqim

ttvkxqim2#

看来你有问题与svg代码,使用此svg代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>

    <title>Document</title>
</head>

<body>

    <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(#a)" fill="#9BA9BA"><path d="M25 10H7a3.003 3.003 0 0 0-3 3v6a2.002 2.002 0 0 0 2 2v7a2.002 2.002 0 0 0 2 2h4a2.002 2.002 0 0 0 2-2V16h-2v12H8v-9H6v-6a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v6h-2v9h-4V16h-2v12a2.002 2.002 0 0 0 2 2h4a2.002 2.002 0 0 0 2-2v-7a2.002 2.002 0 0 0 2-2v-6a3.004 3.004 0 0 0-3-3ZM10 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-6a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm12 6a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-6a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"/></g><defs><filter id="a" x="0" y="0" width="32" height="32" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" 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 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 in2="shape" result="effect1_innerShadow_4_140"/></filter></defs></svg>
    
</body>

</html>

相关问题