内联SVG Defs元素中的Alpha透明渐变

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元素中删除fill =“ blue”属性，如下所示：

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