SVG图像的不透明度渐变

Question

我在一个.svg文件中使用这段代码，为元素应用了一个不透明度淡出渐变。下面的代码可以正常工作，但是从左到右而不是从上到下进行淡化。

我需要做哪些更改才能实现从上到下的渐变呢？谢谢帮助！

SVG文件：

<?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg xmlns="http://www.w3.org/2000/svg"
         version="1.1"
         baseProfile="full">
         <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
            <linearGradient id="g" gradientUnits="objectBoundingBox" x2="1">
              <stop stop-color="white" offset="0"/>
              <stop stop-color="white" stop-opacity="0" offset="1"/>
            </linearGradient>
            <rect x="0" y="0" width="1" height="1" fill="url(#g)"/>
          </mask>
    </svg>

CSS:

mask: url(/mypath/mask.svg#m1);

- Sam Assoum

---

<linearGradient ... gradientTransform="rotate(NN cx cy)" 中的 NN 代表角度，cx 和 cy 表示旋转的原点。 - undefined

我尝试在x2="1"之后添加了那个，但没有任何效果，我需要在将其附加到代码之前删除其他内容吗？ - undefined

Answer 1

你可以使用 x1,y1,x2 和 y2 属性来设置渐变的方向。

如果想要创建一个从上到下的垂直渐变，需要将起始点设为 (0,0)，结束点设为 (0,1)。

<linearGradient id="g" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
    <stop stop-color="white" offset="0"/>
    <stop stop-color="white" stop-opacity="0" offset="1"/>
</linearGradient>

- Paul LeBeau