comment montrer correctement svg masque en chrome

Question

je veux masquer un svg sur le texte pour montrer des données, mais en chrome ne montre pas correctement je crée svg avec le masque et son travail parfaitement dans firefox, mais en chrome ne fonctionne pas je veux appliquer un masque sur le texte pour le texte show transparent défilement

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 ne supporte pas mask sur des éléments HTML. Cependant, il prend en charge mask-image.

See the caniuse site for more information.