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>
即使我使用绝对链接,图像标记也不起作用。
答案 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) 强>