SVG：用三种颜色填充矩形的最佳方法

Question

我有一个应用程序，其中使用SVG表示工作流，如图所示。

每个任务（矩形）具有三个属性：开始，位置和结束。我们希望使用颜色来可视化这些属性。任务颜色的左侧显示开始，任务右侧显示结束，任务中间显示位置。

例如，任务0、12和11在同一时间开始，在同一时间结束并发生在同一位置，因此它们在左侧，右侧和中间的颜色相同。

与任务（1，10），（2，9），（3，8），（4，6），（5，7）相同。

用户可以更改这些属性，因此我们需要动态更改颜色。

我在想两种填充矩形的方法。

1. 具有三个元素-左，中，右-并分别为每个元素上色。当用户更改属性时，矩形的填充属性将更改

   缺点：对于每个任务，我们将有三个“ rect”元素，而对于大量任务，这可能会导致性能降低

2. 使用线性渐变为任务着色。渐变将具有三个停止点。

   缺点：我们需要动态创建/删除“ linearGradients”，然后再将其分配给任务的填充样式。

我当时以为解决方案2（渐变）更好，但是我想知道是否有我不考虑的东西，或者是否还有其他更好的解决方案。

Answer 1

我最终使用第一种方法（其他“ rect”元素）。原因：

1. 更自然的方法
2. 经过大量“任务”（100）的测试，性能不受影响。