アルファ透明のグラデーション要素

Question

私はここに、このCODEPENを持っているとは私の問題です。完全に不透明から完全に透明になるはずです。

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

テキスト：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> 

を私はなぜ理解していませんグラデーションが適用されていないかのように黒く表示されます私が定義したグラデーションは紫です。

ありがとう！

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%" 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> 
 
    <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> 
 

 
    <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>