0

我有这个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)" />

文本显示为黑色，就好像没有应用渐变一样。我定义的渐变是紫色的..

谢谢！

4

1 回答 1

7

如果您只想将渐变应用于文本，则无需使用蒙版，因为渐变支持 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>

于 2016-12-02T04:40:33.310 回答