Как обрезать и выровнять исчезающую маску SVG с абсолютными единицами в нижнем правом углу в Firefox?

Question

В Firefox (где у меня нет линейного зажима) я хочу добиться эффекта постепенного исчезновения градиента для нижнего правого угла.Смотрите sceenshot / codepen в Firefox.Я построил это как встроенный 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>