javascript–svg的path元素中的定向渐变_html-js-css

概述我正在编写一个显示图表并显示依赖关系的简单网页.我在svg中如何呈现路径元素时发现了一个意外的行为.这是示例的完整HTML：<html> <body> <svg id='svgConnections' xmlns='http://www.w3.org/2000/svg' style='width: 300

我正在编写一个显示图表并显示依赖关系的简单网页.我在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在当前问题的上下文中非常有用.          总结       
以上是内存溢出为你收集整理的javascript  –  svg的path元素中的定向渐变全部内容，希望文章能够帮你解决javascript  –  svg的path元素中的定向渐变所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。					
										


					
						欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/web/1119235.html

javascript–svg的path元素中的定向渐变

发表评论

评论列表（0条）