如何在铬中显示正确的svg掩码

Question

我想掩盖svg文本显示数据，但在铬不能正确显示 我创建svg与掩码和它的工作在Firefox中完美，但在铬不工作 我想就案文进行透明显示文本敷面膜在滚动

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。