我在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>
有什么想法吗?
答案 0 :(得分:2)
mask: url(../../assets/images/icons/merch.svg)
不正确,网址需要fragment identifier,这是SVG文件中<mask>
元素的ID。
您的文件甚至不包含<mask>
元素,因此您也需要修复它。