1

我在旧版本的 Firefox (52.8.1) 和 Microsoft Edge (40.15063.674.0) 中将 svg 显示为 mask-image 时遇到问题。

在这个版本的 Firefox 中，我收到一个错误incorrect property value。svg 看起来像带有背景颜色的正方形和矩形。

在新版本的 Firefox 中，一切都很好，我在 Chrome 和 Opera 中将 svg 显示为掩码图像也没有问题。

这可能是什么原因？我知道 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>
4

0 回答 0