使用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 eachrect
.Use the
stroke-dasharray
property (docs) to set a dash definition where the "dash" only covers the top of therect
. 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屋!