如何在鉻中顯示正確的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。