笔记工具与开发

用 stroke-dasharray 把一条 SVG 路径变成点阵

不需要 Canvas,也不需要额外的图片。把虚线的线段长度设为接近零,再配合圆形端点,一条 SVG 路径就会变成一串均匀的圆点。

首页的网络图形只用了普通的 SVG 路径。关键在于三个属性:虚线的线段长度接近零、间隔固定、端点为圆形。每个“线段”被圆形端点撑开成一个直径等于 stroke-width 的圆点。

css
.network path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 0.1 7;
}

这样做体积小、可以无损缩放,还能通过 currentColor 继承文字颜色。切换深色主题时只需要改变语义颜色 token,不必准备第二张图片。

线段长度用 0.1 而不是 0:规范要求零长度线段在圆形端点下也要绘制,但不同渲染器的处理并不完全一致,留一点长度更稳妥。

路径越多、点越密,绘制开销越高。几十条路径在桌面浏览器里没有压力,但不应该为了装饰无限加密。

参考:MDN · stroke-dasharray · MDN · stroke-linecap

读到这里,
感谢你留下这一小段时间。

SVGCSS前端

发表评论…

公开讨论尚未连接

关于整篇文章,也关于让你停下来的那句话。
公开评论基于 GitHub Discussions;接入完成后才可发表。

正在加载评论…
发表评论
支持代码块与表情 · 评论公开可见0 / 6000

正在确认你的身份…

放大图片
搜索

输入关键词搜索标题、正文和标签。