SVG渐变方向答案

【问题标题】：SVG gradients directionSVG渐变方向
【发布时间】：2015-09-11 22:15:25
【问题描述】：

我有一张地图，以及从 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。

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

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

第 1 行是我想要的。第 2 行应该和第 3 行一样（使用与第 1 行相同的渐变）。

（另外，尝试在最后一行将 y2 从 401 更改为 400...）

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

感谢您的帮助。

【问题讨论】：

我的线条方向是 360°。我不会创建 360 度渐变...
SVG 完美地满足了我的需求。不过感谢您的意见。

标签： javascript html css svg

【解决方案1】：

其实我刚刚找到了答案。

为了只有一个渐变，可以对线条应用rotate 变换。（渐变在变换之前应用）。

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

【讨论】：