javascript - SVG渐变方向

Question

我有一张 map ，以及从 A 点到 B 点的线路。

使用 SVG line 标签创建的线条，使用 SVG animate 标签进行动画处理，并使用渐变进行填充。

这是一种渐变类型的代码:

<linearGradient id="linegradred">
    <stop offset="0%" style="stop-color:#F70D1A;stop-opacity:0" />
    <stop offset="50%" style="stop-color:#F70D1A;stop-opacity:0.3" />
    <stop offset="100%" style="stop-color:#F70D1A;stop-opacity:0.8" />
</linearGradient>

现在，如果我画两条线，一条从左上角到右下角，另一条从右下角到左上角，并对它们应用渐变，它们将具有相同的样式。

我希望从右下角到左上角绘制的线的右下角不透明度为 0，左上角不透明度为 0.8。

我想这有点难以理解，所以这里有一个 fiddle :

https://jsfiddle.net/hmf2nqy2/1/

第 1 行是我想要的。 第 2 行应该与第 3 行类似(使用与第 1 行相同的渐变)。

(另外，尝试将最后一行的 y2 从 401 更改为 400...)

我正在寻找的基本上是一个适用于每条线的渐变，并且线 x1, y1 的不透明度为 0，线 x2, y2 的不透明度为 0.8。

感谢您的帮助。

Answer 1

其实我刚刚找到了答案。

为了只有一个渐变，可以对直线应用旋转变换。 (渐变在转换之前应用)。

<svg height='500' width='500'>
    <defs>
        <linearGradient id="linegradred">
            <stop offset="0%" style="stop-color:#F70D1A;stop-opacity:0" />
            <stop offset="50%" style="stop-color:#F70D1A;stop-opacity:0.3" />
            <stop offset="100%" style="stop-color:#F70D1A;stop-opacity:0.8" />
        </linearGradient>        
    </defs>    
    <line x1='200' y1='200' x2='300' y2='300' style='stroke-width:5;fill:url(#linegradred);stroke:url(#linegradred)'></line>
    <line x1='200' y1='200' x2='300' y2='300' style='stroke-width:5;fill:url(#linegradred);stroke:url(#linegradred)' transform='rotate(45, 200, 200)'></line>
    <line x1='200' y1='200' x2='300' y2='300' style='stroke-width:5;fill:url(#linegradred);stroke:url(#linegradred)' transform='rotate(90, 200, 200)'></line>
    <line x1='200' y1='200' x2='300' y2='300' style='stroke-width:5;fill:url(#linegradred);stroke:url(#linegradred)' transform='rotate(135, 200, 200)'></line>
    <line x1='200' y1='200' x2='300' y2='300' style='stroke-width:5;fill:url(#linegradred);stroke:url(#linegradred)' transform='rotate(180, 200, 200)'></line>
    <line x1='200' y1='200' x2='300' y2='300' style='stroke-width:5;fill:url(#linegradred);stroke:url(#linegradred)' transform='rotate(225, 200, 200)'></line>
    <line x1='200' y1='200' x2='300' y2='300' style='stroke-width:5;fill:url(#linegradred);stroke:url(#linegradred)' transform='rotate(270, 200, 200)'></line>
    <line x1='200' y1='200' x2='300' y2='300' style='stroke-width:5;fill:url(#linegradred);stroke:url(#linegradred)' transform='rotate(315, 200, 200)'></line>
</svg>

https://jsfiddle.net/9wy5de9u/