使用SVG的局部边框/笔触 [英] Partial border/stroke using SVG

问题描述

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

为每个添加一个边框/笔触的最佳方法是什么

解决方案

我不认为SVG支持只抚摸矩形或路径的一部分 - 笔画不像CSS边框。您还剩下几个其他选项，所有这些都需要一些额外的工作：

• 拖动整个 rect ，并将 clipPath 应用于




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




• 添加一个单独的行元素作为每个 rect 。




• 使用 stroke-dasharray 属性（ docs ）设置一个破折号定义，其中破折号只覆盖<$ c $的顶部c> rect 。这可能是棘手的正确，但我怀疑这不会太难，因为中风可能开始在形状的左上角。

I'm using svg/d3 for creating a chart made of 'rect' elements.

What is the best way for adding a partical border/stroke for each rectangle (only on top of the rectangle)?

Thanks

解决方案

I don't think SVG supports stroking only portions of a rectangle or path - stroke isn't like a CSS border. You're left with a few other options, all of which take some extra work:

• Stroke the entire rect and apply a clipPath to remove the other three edges - probably works best if you make the rectangles bigger than necessary.

• Apply a linear gradient fill to each rect, using the gradient definition to show a "border" at the top of the shape.

• Add a separate line element to act as the border for each rect.

• Use the stroke-dasharray property (docs) to set a dash definition where the "dash" only covers the top of the rect. This might be tricky to get right, but I suspect it wouldn't be too hard, as the stroke probably begins at the top left of the shape.

这篇关于使用SVG的局部边框/笔触的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！