如何在 chrome 中正确显示 svg 掩码

Question

我想在文本上屏蔽 svg 以显示数据，但在 chrome 中无法正确显示 我用面具创建了svg，它在firefox中完美地工作，但在chrome中不起作用 我想在文本上应用蒙版以在滚动中透明显示文本

HTML：

    <div class="content">
    <div class="xx">
    <p>some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text</p>
    </div>
       <svg>
        <defs>
          <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
            <stop offset="40%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
            <stop offset="60%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
          </linearGradient>

          <mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
             <rect width="1" height="1" fill="url(#grad1)"/>
          </mask>
       </defs>
     </svg>
    </div>

CSS：

    <style>
    .xx {
      mask: url(#masking);
    }
    body{
      background: red
    }

    .content{
      width:300px;
      height:200px;
    }
    .xx{
      height:200px;
      overflow-y:scroll;
    }.xx {
      mask: url(#masking);
    }
    body{
      background: red
    }

    .content{
      width:300px;
      height:200px;
    }
    .xx{
      height:200px;
      overflow-y:scroll;
    }
    </style>

jsfiddle Link

Answer 1

Chrome 不支持 HTML 元素上的 mask。但是它确实支持mask-image。

See the caniuse site for more information.