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

Question

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

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

谢谢

Answer 1

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

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

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

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

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