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

如果您只想将渐变应用于文本，则无需使用遮罩，因为渐变支持停止不透明度属性。

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

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

Alpha Transparent Gradient in Inline SVG Defs Element

svg

transparency

alpha

linear-gradients

url-masking