使用D3.js绘制SVG图形时部分边角未达预期锐利效果该如何解决？

问题原因 #

边角模糊是SVG渲染的常见问题，核心原因有两点：

• SVG描边默认沿路径居中绘制，1单位宽度的描边在路径坐标为整数时，会跨两个相邻像素边界，触发抗锯齿渲染导致模糊。不同边角对齐像素的情况不同，因此出现部分清晰部分模糊的差异。
• 未显式设置尖角连接规则，当尖角角度过小时，默认的miterlimit阈值会让尖角自动转为斜切效果，丧失锐利度。

修复方案 #

可任选以下一种方式修复，也可叠加使用获得最佳效果：

1. 新增渲染属性强制锐利显示
   给g元素新增两个属性即可：

var g = svg.append('g')
  .attr('fill','none')
  .attr('stroke', 'red')
  .attr('stroke-width',1)
  // 新增以下两行
  .attr('stroke-linejoin', 'miter') // 强制尖角连接
  .attr('shape-rendering', 'crispEdges') // 关闭抗锯齿强制像素对齐

2. 偏移路径坐标对齐像素
   如果不想关闭抗锯齿，可以给路径整体偏移0.5单位，让描边刚好落在单个像素范围内：

g.append('path')
  .attr('d', path)
  .attr('stroke', 'red')
  .attr('transform', 'translate(0.5, 0.5)') // 新增偏移

3. 调整miter阈值（可选）
   如果尖角角度特别小，可以补充设置stroke-miterlimit属性，调高阈值避免尖角被截断：

.attr('stroke-miterlimit', 10)

修改后完整可运行代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>
<script>
var width = 600
var height = 600
var svg = d3.select('body')
.append('svg')
.attr('width',width)
.attr('height',height)
.attr('viewBox',`0 0 15 15`)

var g = svg.append('g')
.attr('fill','none')
.attr('stroke', 'red')
.attr('stroke-width',1)
.attr('stroke-linejoin', 'miter')
.attr('shape-rendering', 'crispEdges')

var path = ['M',10,6,2,2,5,6,2,10,'z'].join(' ')
 g.append('path')
  .attr('d', path)
  .attr('stroke', 'red')
</script>

内容的提问来源于stack exchange，提问作者lucky1928