Javascript svg中的有向梯度'；s路径元素_Javascript_Html_Dom_Svg

Javascript svg中的有向梯度'；s路径元素

javascript html dom svg

Javascript svg中的有向梯度'；s路径元素,javascript,html,dom,svg,Javascript,Html,Dom,Svg,我正在写一个简单的网页，显示一个图表和依赖关系。我在svg中呈现path元素的方式中发现了意外行为以下是示例的完整HTML： <html> <body> <svg id="svgConnections" xmlns="http://www.w3.org/2000/svg" style="width: 300px; height: 120px"> <defs> <

我正在写一个简单的网页，显示一个图表和依赖关系。我在

svg

中呈现

path

元素的方式中发现了意外行为

以下是示例的完整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>

同样的例子也在讨论中

让我不舒服的是，第一行从左上角到右下角，看起来和第二行完全一样，是“反向的”：从右下角到左上角

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

这不是一个bug。这是理解上的问题

线性渐变的默认行为是沿水平线从对象的左侧过渡到右侧。不管你是从左到右还是从右到左画一条路径。在这两种情况下，渐变将按照默认设置从左到右显示

考虑下面的演示：

我刚刚阅读了文档，但没有找到任何可以轻松帮助您的内容。一种解决方案是根据行的方向设置

x1

，

x2

，

y1

，

y1

（

的属性），但我希望有一个简单的解决方案。