Question

我在这里结束了。这个'面具'应该正常吗？好吧，我开始怀疑了。我的例子是http://50.63.191.172/mask.html。

我真的不知道还能尝试什么。我确实有一些限制：

我想将svg放在任何html page / css样式表的外部，因为它将在多个地方使用。
我想预定svg非尺寸，因为我不希望有各种尺寸的多个版本;应该只有一个，以便浏览器可以缓存它。
我无法在svg中指定中指定的图像。 svg是一种可应用于任何潜在图像的样式。

我尝试了多种方法来完成这项工作，但到目前为止还没有运气。它使用'-webkit-mask'属性在Chrome / Safari中运行得很好。如果我以绝对像素指定掩蔽矩形的宽度和高度，但我没有使用firefox和'mask'获得“一些”成功，但不是100％。我想要的甚至可行（firefox中的自动缩放掩码）？如果是的话，我错过了什么？

令人沮丧的部分，有时如果我继续重新加载页面，图像会显示为未屏蔽，只有在完成显示后立即擦除。

这是我的svg：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <mask id="c1">
   <g id="group">
     <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
       <stop stop-color="white" offset="0"/>
       <stop stop-color="white" stop-opacity="0" offset="1"/>
     </linearGradient>
     <rect x="0" y="0" width="100%" height="100%" fill="url(#g)" />
   </g>
  </mask>
 </defs>
 <use xlink:href="#group"/>
</svg>

这是我的html / css组合：

<html lang="en">
<head>
 <meta charset=utf-8>
 <title>Testing mask in various browsers</title>
 <style>
  .masked {
   mask: url(mask.svg#c1);  /*Firefox */
   -webkit-mask: url('mask.svg'); /*Chrome, Safari */
  }
  .nob {
    border: none;
    outline: none;
  }
  div.stage { position: relative; }
.inline
{
  display: inline-block;
}
span.stage
{
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  position: absolute;
  left: 0px;
  top: 0px;
}
  .big { width:600px; height:588px; }
  .normal { width:300px; height:294px; }
  .small { width:150px; height:147px; }
 </style>
</head>
<body style="background-image: url(background.gif);">
 <div class="stage inline big">
  <a class="nob" href="mask.html"><img class="nob masked" src="b_pic.jpg"/></a>
 </div>
 <div class="stage inline normal">
  <a class="nob" href="mask.html"><img class="nob masked" src="pic.jpg"/></a>
 </div>
 <div class="stage inline small">
  <a class="nob" href="mask.html"><img class="nob masked" src="s_pic.jpg"/></a>
 </div>
</body>
</html>

我错过了什么？

Answer 1

原来FF不做百分比。相反，它喜欢在0和1之间的objectBoundingBox单位工作。好吧，Chrome / Safari不喜欢这样。但是有一种方法可以区分差异。这是我当前的工作版本，我将在下一步进行优化。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <mask id="c1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <g id="group1">
        <linearGradient id="g1" gradientUnits="objectBoundingBox" x2="0" y2="1">
          <stop stop-color="white" offset="0"/>
          <stop stop-color="white" stop-opacity="0" offset="1"/>
        </linearGradient>
        <rect x="0" y="0" width="1" height="1" fill="url(#g1)" />
      </g>
    </mask>
    <mask id="c2">
      <g id="group2">
        <linearGradient id="g2" gradientUnits="objectBoundingBox" x2="0" y2="1">
          <stop stop-color="white" offset="0"/>
          <stop stop-color="white" stop-opacity="0" offset="1"/>
        </linearGradient>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#g2)" />
      </g>
    </mask>
  </defs>
  <use xlink:href="#group2"/>
</svg>

即便如此，可以完成。

firefox中'mask'的问题

1 个答案: