阿爾法以串聯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>