使用SVG的部分边框/笔划

Question

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

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

由于

Answer 1

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

• 描边整个rect并应用clipPath以移除其他三条边 - 如果您使矩形大于必要值，则效果最佳。

• 对每个矩形应用linear gradient填充，使用渐变定义在形状顶部显示“边框”。

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

• 使用stroke-dasharray属性（docs）设置短划线定义，其中“短划线”仅覆盖rect的顶部。这可能很难做到正确，但我怀疑它不会太难，因为中风可能从形状的左上角开始。