svg路径元素中的有向渐变

我正在编写一个显示图表并显示依赖关系的简单网页.我发现了path元素在其中的呈现方式的意外行为svg.

这是示例的完整HTML:

<html>
    <body>
        <svg id="svgConnections" xmlns="http://www.w3.org/2000/svg" style="width: 300px; height: 120px">
            <defs>
                <linearGradient id="grad1" >
                <stop offset="0%" style="stop-color:yellow;stop-opacity:1" />
                <stop offset="100%" style="stop-color:red;stop-opacity:1" />
                </linearGradient>
            </defs>            
            <path d="M40,40 L100,100 Z" stroke="url(#grad1)" strokeWidth="1px" />
            <path d="M200,100 L140,40 Z" stroke="url(#grad1)" strokeWidth="1px" />
        </svg>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

同样的例子在https://jsfiddle.net/4fLjm0e2/

让我感到困惑的是,从左上角到右下角的第一条线看起来与第二条线完全相同,后面是"反向":从右下角到左上角.

如何使路径始终以黄色开头并以红色结束？

归档时间：	8 年，8 月前
查看次数：	121 次
最近记录：	8 年，8 月前