如何在Firefox的右下角裁剪并对齐带有绝对单位的淡出SVG蒙版？

Question

在Firefox（我没有换线器）中，我想为右下角实现淡出渐变效果。请参阅Firefox中的sceenshot / codepen。我已将其构建为嵌入式SVG，但必须对所有位置进行硬编码。不管绿色框有多大，我如何使此右下角逐渐消失？？我希望渐变具有绝对单位，但是对于蒙版，渐变可以允许任意大小的总面积

codepen（仅适用于FF）：https://codepen.io/anon/pen/EGjeBm

<svg height="4em" width="8em">
  <mask id="maskSource" class="MaskType" maskContentUnits="userSpaceOnUse">
    <rect x="5em" y="3em" width="3em" height="1em" style="fill:url(#grad);" />
    <rect x="0" y="3em" width="5em" height="1em" style="fill:black;" />
    <rect x="0" y="0" width="8em" height="3em" style="fill:black;" />
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:black;" />
      <stop offset="100%" style="stop-color:transparent;" />
    </linearGradient>
  </mask>
</svg>

Answer 1

使用maskContentUnits="objectBoundingBox"并以1的百分比或分数形式给出大小。

div {
  mask-image: url(#maskSource);
  width: 8em;
  height: 4em;
  line-height: 1;
  overflow: hidden;
  font-size: 5em;
}
section {
  border: 1px solid green;
  display: inline-block;
}
.MaskType {
  mask-type: alpha;
}
svg {
  position: absolute;
  height: 0;
  overflow: hidden;
  font-size: 5em;
}
body{background:pink;}

<section><div>Maecenas ultrices, nisl vitae maximus facilisis, dolor velit porttitor odio, vitae pharetra</div></section>

<svg width="0" height="0">
  <mask id="maskSource" class="MaskType" maskContentUnits="objectBoundingBox">
    <rect x="0.625" y="0.75" width="0.375" height="0.25" style="fill:url(#grad);" />
    <rect x="0" y="0.75" width="0.625" height="0.25" style="fill:black;" />
    <rect x="0" y="0" width="1" height="0.75" style="fill:black;" />
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:black;" />
      <stop offset="100%" style="stop-color:transparent;" />
    </linearGradient>
  </mask>
</svg>