javascript - 使用 SVG 的部分边框/描边

Question

我正在使用 svg/d3 创建一个由“rect”元素组成的图表。

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

谢谢

Answer 1

我不认为 SVG 只支持对矩形或路径的部分进行描边——描边不像 CSS 边框。您还有其他一些选择，所有这些都需要一些额外的工作：

• 描边整个rect并应用一个clipPath以删除其他三个边缘 - 如果您使矩形比必要的大，可能效果最好。

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

• 添加一个单独的line元素作为每个rect.

• 使用stroke-dasharray属性 ( docs ) 设置破折号定义，其中“破折号”仅覆盖rect. 这可能很难做到正确，但我怀疑它不会太难，因为笔划可能从形状的左上角开始。