Mozilla에서 SVG 마스크가 작동하지 않습니다.

Question

Mozilla에서 SVG에 문제가 있습니다. 현재 SVG는 Chrome & Safari에서 정상적으로 표시되지만 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은 SVG 파일 내에서 <mask> 요소의 ID를하는 fragment identifier을 가질 필요가 올바르지 않습니다.

파일에 <mask> 요소가 포함되어 있지 않으므로 수정해야합니다.