2

我已经走到了尽头。这个“面具”应该有用吗？好吧，我开始怀疑了。我的例子是在http://50.63.191.172/mask.html.

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

  1. 我想将 svg 放在任何 html 页面/css 样式表的外部，因为它将在多个地方使用。
  2. 我想预先确定 svg 非尺寸，因为我不想为各种尺寸提供多个版本；应该只有一个，以便浏览器可以缓存它。
  3. 我不能在 svg 中指定图像。svg 是应用于任何潜在图像的样式。

我已经尝试了多种方法来完成这项工作，但到目前为止还没有运气。使用它们的“-webkit-mask”属性，它在 Chrome/Safari 中运行良好。如果我以绝对像素指定遮罩矩形的宽度和高度，但不是 100%，我在 firefox 和 'mask' 上取得了“一些”成功。我想要的甚至是可行的（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>

我错过了什么？

4

1 回答 1

2

Turns out FF doesn't do percent. Instead it likes to work in objectBoundingBox units between 0 and 1. Well, Chrome/Safari don't like that. But there is a way to split the difference. Here's my working current version which I will aim to optimize next.

<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>

So it goes, it can be done.

于 2013-05-29T04:42:23.897 回答