알파 투명 그라데이션 요소

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>