使用SVG的部分邊框/筆划

Question

我正在使用svg / d3來創建由'rect'元素組成的圖表。

為每個矩形（僅在矩形頂部）添加局部邊框/描邊的最佳方法是什么？

謝謝

Answer 1

我不認為SVG僅支持筆觸矩形或路徑的某些部分-筆觸與CSS邊框不同。 你還有其他一些選擇，所有這些都需要額外的工作：

• 筆觸整個rect並應用clipPath除去其他三個邊緣-如果使矩形大於必要的矩形，則可能效果最好。

• 對每個矩形應用線性漸變填充，並使用漸變定義在圖形頂部顯示“邊框”。

• 添加一個單獨的line元素作為每個rect的邊界。

• 使用stroke-dasharray屬性（ docs ）設置破折號定義，其中“破折號”僅覆蓋rect的頂部。 正確地說這可能很棘手，但是我懷疑它不會太難，因為筆觸可能從形狀的左上方開始。