我正在编写一个显示图表并显示依赖关系的简单网页.我在svg中如何呈现路径元素时发现了一个意外的行为.
这是示例的完整HTML：
同样的例子是https://jsfiddle.net/4fLjm0e2/
让我感到困惑的是,从左上角到右下角的第一条线看起来与第二条线完全相同,后面是“反向”：从右下角到左上角.
如何使路径始终以黄色开头并以红色结束？
最佳答案
This is not a bug. This is problem in understanding.
线性渐变的默认行为是沿着从对象左侧到其右侧的水平线过渡.如果您从左到右或从右到左绘制路径并不重要.在这两种情况下,渐变将按照默认设置从左到右显示.
考虑下面的演示：
如果您想要在垂直线或角度线上进行颜色转换,则必须使用x1和x1指定线的起点.
y1属性及其结束点与x2和y2属性.
而不是将停靠点复制到每个< linearGradient>我们将使用xlink：href属性来引用原始渐变.止点将被继承,但x和y坐标将被每个单独的梯度覆盖.
扩展上面的例子：
在您的示例中,您使用的是对角路径,因此我们需要覆盖< linearGradient>的x1,y1,x2和y2属性.元素.
>第一个< linearGradient>上的这些值element将覆盖默认的从左到右的设置,以从左上角到右下角生成对角线渐变.
>在< linearGradient>上元素这些值将改变梯度的方向,即从底部到顶部.
现在我们可以将这些渐变应用于相应的路径.
注意：此Question在当前问题的上下文中非常有用.
