我在旧版本的Firefox（52.8.1）和Microsoft Edge（40.15063.674.0）中将svg显示为mask-image时遇到问题。
在此版本的Firefox中，我收到错误incorrect property value。 svg看起来像正方形和矩形，背景颜色。
在新版本的Firefox中，一切都很棒，在Chrome和Opera中也没有问题，并将svg显示为mask-image。
这可能是什么原因？我知道Edge就像IE一样好，但我希望在Firefox中有这样的问题，因为它当时对mask-image有部分支持。
是否有解决此问题的方法？
css：
float:left;
content: '';
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100%;
mask-size: 100%;
-webkit-mask-image: url(#{$images}/icon-date.svg);
mask-image: url(#{$images}/icon-date.svg);
width: 15px;
height: 16px;
background: $red-color;
margin: 3px 7px 0 0;
这就是我的svg看起来的样子：
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="55.438px" height="56.114px" viewBox="0 0 55.438 56.114" enable-background="new 0 0 55.438 56.114" xml:space="preserve">
<g>
<path fill="#3A444F" d="M50.438,5.414h-5.323v3.5h5.323c0.813,0,1.5,0.688,1.5,1.5v9.217H3.5v-9.217c0-0.813,0.687-1.5,1.5-1.5
h6.383v4.477c0,0.967,0.784,1.75,1.75,1.75s1.75-0.783,1.75-1.75V8.914h0.011v-3.5h-0.011V1.75c0-0.966-0.784-1.75-1.75-1.75
s-1.75,0.784-1.75,1.75v3.664H5c-2.75,0-5,2.25-5,5v40.7c0,2.75,2.25,5,5,5h45.438c2.75,0,5-2.25,5-5v-40.7
C55.438,7.664,53.188,5.414,50.438,5.414z M50.438,52.614H5c-0.813,0-1.5-0.686-1.5-1.5V23.131h48.438v27.983
C51.938,51.928,51.251,52.614,50.438,52.614z"/>
<path fill="#3A444F" d="M37.633,13.391c0,0.967,0.783,1.75,1.75,1.75s1.75-0.783,1.75-1.75V1.75c0-0.966-0.783-1.75-1.75-1.75
s-1.75,0.784-1.75,1.75v3.664h-5.618v3.5h5.618V13.391z"/>
<path fill="#3A444F" d="M24.508,13.391c0,0.967,0.784,1.75,1.75,1.75s1.75-0.783,1.75-1.75V8.914h0.007v-3.5h-0.007V1.75
c0-0.966-0.784-1.75-1.75-1.75s-1.75,0.784-1.75,1.75v3.664h-5.614v3.5h5.614V13.391z"/>
<g>
<g>
<g>
<g>
<rect x="9.841" y="35.909" fill="#3A444F" width="4" height="4"/>
</g>
</g>
<g>
<g>
<rect x="17.815" y="35.909" fill="#3A444F" width="4" height="4"/>
</g>
</g>
<g>
<g>
<rect x="25.792" y="35.909" fill="#3A444F" width="4" height="4"/>
</g>
</g>
<g>
<g>
<rect x="33.767" y="35.909" fill="#3A444F" width="4.001" height="4"/>
</g>
</g>
<g>
<g>
<rect x="41.742" y="35.909" fill="#3A444F" width="4" height="4"/>
</g>
</g>
</g>
<g>
<g>
<g>
<rect x="17.815" y="27.926" fill="#3A444F" width="4" height="4"/>
</g>
</g>
<g>
<g>
<rect x="25.792" y="27.926" fill="#3A444F" width="4" height="4"/>
</g>
</g>
<g>
<g>
<rect x="33.767" y="27.926" fill="#3A444F" width="4.001" height="4"/>
</g>
</g>
<g>
<g>
<rect x="41.742" y="27.926" fill="#3A444F" width="4" height="4"/>
</g>
</g>
</g>
<g>
<g>
<g>
<rect x="9.841" y="43.893" fill="#3A444F" width="4" height="4"/>
</g>
</g>
<g>
<g>
<rect x="17.815" y="43.893" fill="#3A444F" width="4" height="4"/>
</g>
</g>
<g>
<g>
<rect x="25.792" y="43.893" fill="#3A444F" width="4" height="4"/>
</g>
</g>
<g>
<g>
<rect x="33.767" y="43.893" fill="#3A444F" width="4.001" height="4"/>
</g>
</g>
</g>
</g>
</g>
</svg>