阿尔法以串联SVG DEFS透明的渐变元素

Question

我有这个CODEPEN，这里是我的问题：

我不理解为什么我申请和我的面具引用填补像这样的梯度，不会渲染，因为它应该。它应该从完全不透明到完全透明。对于梯度我使用：http://angrytools.com/gradient/?0_800080,100_450045&0_0,100_100&l_180：

<mask id="myMask" x="0" y="0" width="100%" height="100%"> 
    <rect x="0" y="0" width="100%" height="100%" fill="url(#grad1)" /> 
    </mask> 

另外我不明白为什么，如果我从我的使用元素去掉填充=“蓝色”的属性，像这样：

<use xlink:href="#myText" mask="url(#myMask)" /> 

文本显示为黑色，好像没有应用渐变。我定义的梯度是紫色的..

谢谢！

Answer 1

如果您只是想将渐变应用于文本，则不需要使用蒙版，因为渐变支持stop-opacity属性。

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> 
 
    <defs> 
 
    <linearGradient id="lgrad" x1="100%" y1="50%" x2="0%" y2="50%"> 
 
     <stop offset="0" stop-color="black" /> 
 
     <stop offset="1" stop-color="white" /> 
 
    </linearGradient> 
 
    <mask id="myMask" x="0" y="0" width="100%" height="100%"> 
 
     <rect x="0" y="0" width="100%" height="100%" fill="url(#lgrad)" /> 
 
    </mask> 
 
    <text x="100" y="120" text-anchor="middle" id="myText" font-size="50">Hello</text> 
 
    </defs> 
 
    <g mask="url(#myMask)"> 
 
    <use xlink:href=" #myText" transform="translate(0,-50) " fill="red " /> 
 
    <use xlink:href="#myText" transform="translate(0,0)" fill="green" /> 
 
    <use xlink:href="#myText" transform="translate(0,50)" fill="blue" /> 
 
    </g> 
 
</svg>

口罩把颜色变成不透明的信息：

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> 
 
    <defs> 
 
    <linearGradient id="lgrad" x1="100%" y1="50%" x2="0%" y2="50%"> 
 
     <stop offset="0%" style="stop-color:rgb(128,0,128);stop-opacity:0" /> 
 
     <stop offset="100%" style="stop-color:rgb(69,0,69);stop-opacity:1" /> 
 
    </linearGradient> 
 
    <text x="100" y="120" text-anchor="middle" id="myText" font-size="50">Hello</text> 
 
    </defs> 
 
    <use xlink:href="#myText" fill="url(#lgrad)" /> 
 
</svg>

只有当您想从您的填充单独的透明度需要口罩。从黑色（完全透明）将白色（完全不透明）

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> 
 
    <defs> 
 

 
    <mask id="myMask" x="0" y="0" width="100%" height="100%"> 
 
     <rect x="0" y="0" width="50%" height="50%" fill="white" /> 
 
     <rect x="50%" y="0" width="50%" height="50%" fill="#333" /> 
 
     <rect x="0%" y="50%" width="50%" height="50%" fill="#aaa" /> 
 
     <rect x="50%" y="50%" width="50%" height="50%" fill="white" /> 
 
     <circle cx="50%" cy="50%" r="15%" fill="black" /> 
 
    </mask> 
 
    <text x="100" y="120" text-anchor="middle" id="myText" font-size="50">Hello</text> 
 
    </defs> 
 
    <rect x="0" y="0" width="100%" height="100%" fill="beige" /> 
 
    <g mask="url(#myMask)"> 
 
    <use xlink:href="#myText" transform="translate(0,-50)" fill="red" /> 
 
    <use xlink:href="#myText" transform="translate(0,0)" fill="green" /> 
 
    <use xlink:href="#myText" transform="translate(0,50)" fill="blue" /> 
 
    </g> 
 
</svg>