SVG蒙版在Mozilla中無法使用

Question

我在Mozilla中遇到SVG問題。目前，Safari瀏覽器中的Chrome &顯示的SVG很好，但在Mozilla中顯示爲正方形。

HTML

<div class="rz-icon-merch bg-white"> </div>

CSS

-webkit-mask: url(../../assets/images/icons/merch.svg) no-repeat; mask: url(../../assets/images/icons/merch.svg); } [class*="rz-icon"] { -webkit-mask-size: cover; mask-size: cover; width: 50px; height: 50px; } .bg-white { background: white;

SVG

<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 82 90"><defs><style>.cls-1{fill:#fff;}</style></defs><title>noun_248481-merch</title><path class="cls-1" d="M85,25.88A2,2,0,0,0,83,24H69V20A15,15,0,0,0,50.65,5.39,17.12,17.12,0,0,1,55,9,11,11,0,0,1,65,20v4H57V20a15,15,0,0,0-30,0v4H13a2,2,0,0,0-2,1.88l-4,67A2,2,0,0,0,9,95H87a2,2,0,0,0,2-2.12ZM53,20v4H43V20a11.27,11.27,0,0,1,.08-1.29c0-.16,0-0.31.07-0.46s0.09-.51.15-0.77,0.09-.38.15-0.57,0.12-.38.19-0.57A11,11,0,0,1,44.77,14l0.16-.25c0.16-.23.33-0.46,0.51-0.68l0.23-.27c0.21-.25.43-0.48,0.67-0.71h0A11.25,11.25,0,0,1,48,10.8,11,11,0,0,1,53,20ZM31,20A10.92,10.92,0,0,1,43.65,9.14a14.7,14.7,0,0,0-4.56,9.22q0,0.13,0,.25C39,19.07,39,19.53,39,20v4H31V20ZM21,91H11.12l3.76-63H27v6a2,2,0,0,0,4,0V28H53v6a2,2,0,0,0,4,0V28H69.12l3.76,63H21Zm55.88,0L73.12,28h8l3.76,63h-8Z" transform="translate(-7 -5)"/></svg>

任何想法？

Answer 1

mask: url(../../assets/images/icons/merch.svg) 

是不正確的URL都需要有一個fragment identifier這是SVG文件中的<mask>元素的ID。

您的文件甚至沒有包含<mask>元素，因此您需要修復該元素。