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>
即使我使用绝对链接，图像标签也不起作用。
最佳答案
遇到了同样的问题。好像 bug 652991 .
<base>确实不会产生任何问题，只是这种特殊情况。
关于html - 在 Firefox 中带有基本 href 的 SVG 掩码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21984429/