如何使SVG LinearGradient不变

Question

我是 SVG 和 React 的初学者，我正在开发一个 Reactflow 应用程序来设计一个低代码工具来生成 DAG。

我的源句柄和目标句柄具有不同颜色的节点，并且我使用此介质文章来生成具有线性渐变的自定义边缘

正确的边缘颜色渐变：

我的问题是，当源移动到目标下方时，线性渐变会改变方向，我得到以下结果

边缘颜色渐变不正确：

我希望线性梯度相对于源位置和目标位置保持不变。

有什么建议吗？

编辑：中等文章提供了一个 codesandbox 示例，它说明了我的问题：将节点 5 移动到节点 4 上方会反转梯度

Answer 1

问题解决了

我定义了一个函数来检查节点的相对位置并相应地调整渐变样式。

function adjustStyle(sourceY,targetY) {
    // Check if source is below target
    let style;
    if (sourceY < targetY) {
      style = {stroke: 'url(#edgegradient1)'};
      }
    else {
      style = {stroke: 'url(#edgegradient2)'};
    }
    return style;
  } 

我在

CustomEdge.js

脚本中添加了对此函数的调用

import React from 'react';
import { getBezierPath } from 'reactflow';

export default function CustomEdge({id,sourceX,sourceY,targetX,targetY,
                                    sourcePosition,targetPosition,
                                    style = {},data,markerEnd,}) {

const newstyle=adjustStyle(sourceY,targetY);
const [edgePath] = getBezierPath({sourceX,sourceY,sourcePosition,
                                  targetX,targetY,targetPosition,});
return (
  <>
    <path
      id={id}
      style={newstyle}
      className="react-flow__edge-path"
      d={edgePath}
      markerEnd={markerEnd}
    />
    <text>
      <textPath
        href={`#${id}`}
        style={{ fontSize: '12px' }}
        startOffset="50%"
        textAnchor="middle"
      >
        {data.text}
      </textPath>
    </text>
  </>
);
}

edgegradient1

和

edgegradient2

定义为

export default function GradientEdge1() {
    return (
      <svg viewBox="0 0 10 10" style={{ height: 0, width: 0 }}>
        <defs>
          <linearGradient id="edgegradient1" gradientTransform="rotate(90)">
            <stop offset="5%" stopColor="gold" />
            <stop offset="95%" stopColor="red" />
          </linearGradient>
        </defs>
        <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
      </svg>
    );
  }

和

export default function GradientEdge2() {
    return (
      <svg viewBox="0 0 10 10" style={{ height: 0, width: 0 }}>
        <defs>
          <linearGradient id="edgegradient2" gradientTransform="rotate(90)">
            <stop offset="5%" stopColor="red" />
            <stop offset="95%" stopColor="gold" />
          </linearGradient>
        </defs>
        <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
      </svg>
    );
  }