Question

SVG模板在Chrome中运行良好，但Firefox。

所以我找到了解决问题的另一种方法。

但是当我使用像<base href="/" />这样的基本标记时，图片标记<image width="165px" height="150px" xlink:href="mask.png" filter="url(#maskfilter)" />无效。

这是HTML代码。

<!DOCTYPE html>
<head>

<base href="/" />

<meta charset="UTF-8" />
<html>
<head>
<title>mask</title>
<style>
.masked{
    width:300px;
    height:300px;
    -webkit-mask-image:url("mask.png");
    -webkit-mask-size:cover;
    mask:url("#svgmask");
    background-image:url("masked.jpg");
}
</style>
</head>
<body>

<div class="masked"></div>
<svg height="0">
    <filter id="maskfilter">
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0" />
    </filter>
    <mask id="svgmask">
        <image width="165px" height="150px" xlink:href="mask.png" filter="url(#maskfilter)" />
    </mask>
</svg>
</body>
</html>

即使我使用绝对链接，图像标记也不起作用。

Answer 1

遇到了同样的问题。好像是bug 652991。 <base>确实没有产生任何问题，只是这个具体案例。

Answer 2

这是技巧，您需要将svg文件中生成的所有点转换为等于点路径除以遮罩尺寸的比率。

为了便于解释，我已经制作了一个快速工具来帮助设计师将他们的svg转换为与firefox兼容的面具，你可以在我的网站上看到一个现场演示（http://www.prollygeek.com），例如facebook logo ，和twitter徽标只是面具，这里是你可以用来将你的svg转换为面具的工具： http://prollygeek.com/svg-mask/

例如：

<mask id="fb"  maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<path d="M236.626,120.827v27.295h-14.851c-4.416,0-7.225,1.204-8.63,3.612c-1.003,1.604-1.405,4.415-1.405,8.229v12.442h25.287l-3.01,27.494H211.74v79.273h-32.712v-79.273h-16.055v-27.494h16.055v-16.457c0-16.858,5.82-27.695,17.259-32.311
c5.619-2.208,10.436-2.811,15.453-2.811H236.626z"/>

将转向：

<mask id="fb"  maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<path d="M0.59,0.3v0.0675h-0.035c-0.01,0-0.0175,0.0025-0.02,0.0075c-0.0025,0.0025-0.0025,0.01-0.0025,0.02v0.03h0.0625l-0.0075,0.0675H0.5275v0.1975h-0.08v-0.1975h-0.04v-0.0675h0.04v-0.04c0-0.04,0.0125-0.0675,0.0425-0.08c0.0125-0.005,0.025-0.005,0.0375-0.005H0.59z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#ffffff;"/>

请不要忘记添加此属性style =“fill-rule：evenodd; clip-rule：evenodd; fill：#ffffff;”

并填充任何颜色，无所谓。

然后将你的面具链接到你想要的css元素：

例如：

  mask:url(images/fb.svg#fb);

计算器可以免费使用，但请不要在其他任何地方复制或发布。

<强> Working Example (test on FF)

在Firefox中使用基本href的SVG掩码

2 个答案: