使用SVG的部分边框/笔划

Question

我正在使用svg / d3来创建由'rect'元素组成的图表。

为每个矩形（仅在矩形顶部）添加局部边框/描边的最佳方法是什么？

谢谢

Answer 1

我不认为SVG仅支持笔触矩形或路径的某些部分-笔触与CSS边框不同。 你还有其他一些选择，所有这些都需要额外的工作：

• 笔触整个rect并应用clipPath除去其他三个边缘-如果使矩形大于必要的矩形，则可能效果最好。

• 对每个矩形应用线性渐变填充，并使用渐变定义在图形顶部显示“边框”。

• 添加一个单独的line元素作为每个rect的边界。

• 使用stroke-dasharray属性（ docs ）设置破折号定义，其中“破折号”仅覆盖rect的顶部。 正确地说这可能很棘手，但是我怀疑它不会太难，因为笔触可能从形状的左上方开始。