我有一个应用程序，其中使用 SVG 表示工作流，如图所示。
每个任务（矩形）具有三个属性：start、location和end。我们想用颜色来可视化这些属性。任务颜色左侧显示开始，任务右侧显示结束，任务中间显示位置。
例如，任务 0、12 和 11 同时开始，同时结束并发生在同一位置，因此它们在左侧、右侧和中间具有相同的颜色。
与任务 (1, 10), (2, 9), (3, 8), (4, 6), (5, 7) 相同。
用户可以更改这些属性，因此我们需要动态更改颜色。
我在想两种方法来填充矩形。
拥有三个元素- 左、中、右 - 并相应地为每个元素着色。当用户更改属性时，矩形的填充属性将被更改
缺点：对于每个任务，我们将多出三个“rect”元素，对于大量任务，这可能会导致性能下降
使用线性渐变为任务着色。渐变将有三个停止。
缺点：我们需要在将它们分配给任务的填充样式之前动态创建/删除“linearGradients”。
我在想解决方案＃2（渐变）更好，但我想知道是否有我不考虑的东西，或者是否有另一个更好的解决方案。
