SVG渐变方向 [英] SVG gradients direction

问题描述

我有一张地图，有从A点到B点的线.

I've a map, and lines going from point A to point B.

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

Lines created using SVG line tag, animated using SVG animate tags, and are using gradients for their filling.

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

Here is the code for one gradient type :

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

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

Now if I draw two lines, one from top-left to bottom-right, and another one from bottom-right to top-left, applying the gradient to them, they'll both have the same style.

我希望从右下角到左上角绘制的线条在右下角具有0的不透明度，在左上角具有0.8的不透明度.

I'd like the line drawn from bottom-right to top-left to have opacity 0 at bottom-right, and opacity 0.8 at top-left.

我猜这有点难以理解，所以这里是一个小提琴:

It's kind of hard to understand I guess, so here is a fiddle :

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

第1行是我想要的. 第2行应类似于第3行(使用与第1行相同的梯度).

line 1 is what I want. line 2 should be like line 3 (using same gradient than line 1).

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

(also, try to change y2 from 401 to 400 on the last line...)

我要寻找的基本上是适用于每条线的渐变，并且x1，y1的不透明度为0，x2，y2的不透明度为0.8.

What I'm looking for is basically a gradient that would apply on every line, and with line x1, y1 having opacity 0 and line x2, y2 having opacity 0.8.

感谢您的帮助.

推荐答案

实际上我刚刚找到了答案.

Actually I've just found the answer.

为了仅具有一个渐变，可以将rotate转换应用于行. (在转换之前应用渐变).

In order to have only one gradient it's possible to apply the rotate transformation to the line. (Gradient is applied before the transformation).

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

这篇关于SVG渐变方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！