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

时间:2014-02-24 10:03:32

标签: html css firefox svg

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>

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

2 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分: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)