SVG图像不透明度渐变

Sam Assoum 发表于 Dev

山姆·阿索姆（Sam Assoum）

我在.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);

保罗·勒博

你与设置梯度的方向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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。