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>

另外，我不明白为什么如果我删除填充=＆＃34;蓝色＆＃34;来自我的use元素的属性如下：

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

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

谢谢！

Answer 1

如果您只想将渐变应用于文本，则无需使用蒙版，因为渐变支持stop-opacity属性。

＆＃13;

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

＆＃13;

如果你想从填充物中分离出不透明度，你只需要面具：

＆＃13;

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

＆＃13;

蒙版将颜色转换为不透明度信息。从黑色（完全透明）到白色（完全不透明）

＆＃13;

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

＆＃13;

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

1 个答案: