Alpha Transparent Gradient in Inline SVG Defs Element

Question

I have this CODEPEN and here are my issues:

I am not understanding why the gradient I applied and referenced as my mask fill like so, doesn't render as it should. It should go from fully opaque to fully transparent. For the gradient I am using: 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>

In addition I don't understand why if I remove the fill="blue" attribute from my use element like so:

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

The text appears black as if no gradient was applied. The gradient I defined is purple..

Thanks!

Your codepen link is broken. It is returning a 404. – Paul LeBeau Dec 02 '16 at 02:49 — Paul LeBeau, Dec 02 '16 at 02:49

score 9 · Accepted Answer · answered Dec 02 '16 at 04:40

if you just want to apply your gradient to your text, there is no need to use masks, because gradients support the stop-opacity property.

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

you only need masks if you want to seperate the opacity from your fills:

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

masks turn colors into opacity information. going from black(totally transparent) to white (totally opaque)

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

Alpha Transparent Gradient in Inline SVG Defs Element

1 Answers1