正しくクロムにsvgマスクを表示する方法

Question

データを表示するためにテキスト上にsvgをマスクしたいが、クロムが正しく表示されない マスクとその作業は完全にfirefoxで作成するが、クロムは機能しない i want

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

スクロール

HTMLで透明ショーのテキストのテキストの上にマスクを適用するには

jsfiddle Link

Answer 1

ChromeがHTML要素にmaskをサポートしていません。ただし、mask-imageをサポートしています。

See the caniuse site for more information。