如何在svg中对齐多边形外缘上的点以获得较厚的边框？

我的问题是:

我有一个多边形，它是通过取一些点来绘制的，我正在显示多边形边缘/轮廓上的点。当我增加多边形的笔划宽度时，点会在轮廓的中心对齐。如何在边缘/边界的外侧实现点对齐

实际情况如下图所示，点在边界/笔划上居中对齐

这是一个工作区链接

https://codepen.io/jinata92/pen/JjKZeqE

我正在寻找如下图所示的解决方案，这些点应在边框/笔划的外边缘对齐

var高度=100，
宽度=100；
var多边形；
变量顶点=[
[6, 6],
[94, 6],
[94, 94],
[6, 94]
];
var svg，gContainer；
函数配置（）{
svg=d3
.选择（“.main”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（“viewBox”，`0${width}${height}`）；
gContainer=svg。选择（“g”）；
}
函数drawPolygon（）{
多边形=gContainer
.append（“多边形”）
.attr（“点”，顶点）
.attr（“类别”、“分部”）；
}
函数drawCircle（）{
gContainer
.selectAll（“圆圈”）
.数据（顶点）
.输入（）
.附加（“圆圈”）
.attr（“类”、“顶点”）
.classed（“句柄”，真）
.attr（“cx”，功能（d）{
返回d[0]；
})
.attr（“cy”，函数（d）{
返回d[1]；
})
.attr（“r”，4）；
}
config（）；
drawPolygon（）；
画圈（）
正文{
背景颜色：灰色；
}
svg{
位置：绝对位置；
溢出：可见；
}
.调整div的大小{
位置：相对位置；
溢出：可见；
}
.多边形{
笔画：黄色；
填充：透明；
}
.顶点，
多特先生{
填充：黑色；
中风：无；
}
.部分{
笔画宽度：30；
笔画：黄色；
}
笔划宽度始终应用于两侧，因此线条的中心仍在所需位置。但也有一些变通办法。一种方法是只绘制形状，但也应用与元素相等的笔划，但不使用笔划宽度：


var高度=100，
宽度=100；
var多边形；
变量顶点=[
[6, 6],
[94, 6],
[94, 94],
[6, 94]
];
var svg，gContainer；
函数配置（）{
svg=d3
.选择（“.main”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（“viewBox”，`0${width}${height}`）；
gContainer=svg。选择（“g”）；
}
函数drawPolygon（）{
多边形=gContainer
.append（“多边形”）
.attr（“剪辑路径”、“url”（“#我的剪辑路径”））
.attr（“点”，顶点）
.attr（“类别”、“分部”）；
//附加剪辑路径
svg.append（“defs”）
.append（“clipPath”）
.attr（“id”，“我的剪辑路径”）
.append（“多边形”）
.attr（“点”，顶点）
.attr（“类别”、“分部”）；
}
函数drawCircle（）{
gContainer
.selectAll（“圆圈”）
.数据（顶点）
.输入（）
.附加（“圆圈”）
.attr（“类”、“顶点”）
.classed（“句柄”，真）
.attr（“cx”，功能（d）{
返回d[0]；
})
.attr（“cy”，函数（d）{
返回d[1]；
})
.attr（“r”，4）；
}
config（）；
drawPolygon（）；
画圈（）
正文{
背景颜色：灰色；
}
svg{
位置：绝对位置；
溢出：可见；
}
.调整div的大小{
位置：相对位置；
溢出：可见；
}
.多边形{
笔画：黄色；
填充：透明；
}
.顶点，
多特先生{
填充：黑色；
中风：无；
}
.部分{
笔画宽度：30；
笔画：黄色；
}