Альфа прозрачный в Встраиваемом SVG Defs Element

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