如何用SVG <path>元素实现适配不同stroke-width的通用点状边框？

我需要给SVG添加支持不同stroke-width（1px、2px、3px、4px、5px）的点状边框样式，要求必须使用<path>元素实现，不能用<style>属性，但目前用<path>做出来的效果和用style属性设置的预期效果不一致。

你可以替换下面SVG的style属性里的边框尺寸，查看预期效果：

预期效果（使用style属性的SVG） #

<svg height="100" width="200" 
     style="border:5px dotted #000000!important;background-color:#ccffff;">
</svg>

当前实现效果（使用path元素的SVG） #

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100" width="200">
  <g>
    <path d="M02.5,0 V97.5" stroke-width="5" stroke="#000000" stroke-dashoffset="5" stroke-dasharray="0 10" fill="none" stroke-linecap="round"/>
    <path d="M197.5,0 V97.5" stroke-width="5" stroke="#000000" stroke-dashoffset="5" stroke-dasharray="0 10" fill="none" stroke-linecap="round"/>
    <path d="M0,2.5 H197.5" stroke-width="5" stroke="#000000" stroke-dashoffset="5" stroke-dasharray="0 10" fill="none" stroke-linecap="round"/>
    <path d="M0,97.5 H197.5" stroke-width="5" stroke="#000000" stroke-dashoffset="5" stroke-dasharray="0 10" fill="none" stroke-linecap="round"/>
  </g>
</svg>

当前方案用了多个<path>元素，而且无法动态适配不同的边框尺寸——修改stroke-width时，d、stroke-dasharray、stroke-dashoffset这些属性都得手动调整。我需要一个通用方案：只要修改边框尺寸，相关属性能自动调整，最终效果和用style属性实现的完全一致。

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