Highcharts自定义连续线型pattern重复拼接处出现分隔如何消除

在Highcharts图表中使用自定义pattern填充效果时，pattern重复平铺的拼接位置存在明显可见分隔，效果示意如下：

当前使用的pattern定义配置：

pattern: {
  path: {
    d: 'M 0 0 L 10 20',
    strokeWidth: 1,
  },
  width: 10,
  height: 20,
  color: '#eee',
},

拼接缝的产生是SVG描边规则导致的：1px宽度的描边会沿路径向两侧各延伸0.5px，当前配置里路径的起止点刚好落在pattern的视口边界上，边界外的0.5px描边会被pattern视口裁掉，相邻块拼接时就会出现半像素的透明缝隙。

按以下规则调整即可：

• 按斜线斜率将路径起止点向外延伸半个线宽对应的距离，让描边超出pattern视口，裁切后可与相邻块的描边无缝衔接
• 给路径设置方头线帽，避免线端截断产生缺口
• 保持pattern宽高和斜线重复步长一致，避免填充密度错乱

修正后可直接使用的配置：

pattern: {
  path: {
    d: 'M -0.5 -1 L 10.5 21', // 该斜线斜率为2，x方向外溢0.5px对应y方向外溢1px
    strokeWidth: 1,
    strokeLinecap: 'square',
  },
  width: 10,
  height: 20,
  color: '#eee',
},

如果仍有极细微的显示缝隙，可以在保持斜线斜率不变的前提下，给pattern宽高各加1px冗余，同步调整路径终点坐标即可。

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