使用SVG的部分边框/描边

Question

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

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

谢谢

Answer 1

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

• 抚平整个

  rect

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

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

• 添加单独的

  line

  元素作为每个

  rect

  的边框。

• 使用

  stroke-dasharray

  属性 (docs) 设置破折号定义，其中“破折号”仅覆盖

  rect

  的顶部。这可能很难做到，但我怀疑这不会太难，因为笔划可能从形状的左上角开始。

Answer 2

如果您想使用中风，请使用中风-dasharray。最简单的使用方法是使用两个数字：

stroke-dasharray = "length-of-dash, length-of-gap"

。这些长度可以是 SVG 父元素的原始单位（如

viewBox

中定义），也可以是 viewBox 定义区域或 SVG 父元素标准化对角线的 百分比：

Math.sqrt((width ** 2) + (height ** 2)) / Math.sqrt(2)

。

因此，如果您的矩形和 SVG 具有固定大小，并且您确切知道

<rect>

有多大，则可以使用

stroke-dasharray = "width, perimeter - width"

。这基本上是说，你的破折号将与你的

<rect>

一样长，并且破折号间隙将与其余边的长度一样长。破折号从左上角开始，因此这非常适合您的用例。

另一方面，如果您的表格具有响应能力，则您必须进行一些数学运算才能使百分比发挥作用。

比方说

fullDash = perimeter * normalizedDiagonal * 100

；这将是相当于破折号的百分比值，与您的

<rect>

的周长一样长。

topDash = width / perimeter

是我们想要覆盖的周长的分数。

现在我们可以说我们希望破折号为

dash = topDash * fullDash

并且我们的间隙至少为

fullDash

（但如果我们想要的话我们可以更准确并称之为

gap = fullDash - dash

），所以我们最终的 dasharray 看起来像

 stroke-dasharray = "${dash}%, ${fullDash}%"

。

您可以在这里看到一个粗略的草图：https://dkallen78.github.io/math-trainer/experiments/dasharray-test.html