我正在尝试在SVG rect元素上实现基于百分比的边框状效果，如下图所示。有人告诉我，我需要使用stroke-dasharray来执行此操作，但是尽管使用了JSFiddle，但我仍找不到能够普遍适用于任何高度和宽度的SVG的解决方案。任何帮助或建议，将不胜感激。
这是我目前在JSFiddle中使用的内容：
<html>
<body>
<div>
<svg>
<rect
x="10"
y="10"
rx="10"
ry="10"
height="48"
width="48"
stroke-dasharray="50% 100%"
style="stroke: black; fill: none;"
/>
</svg>
</div>
</body>
</html>
正如@enxaneta所评论的那样，总路径长度可以使用getTotalLength()找到
方法
<html>
<body>
<div>
<input type="button" value="Total" onclick="TotalLength()"/>
<svg width="20%" height="20%" viewBox="0 0 60 60">
<rect id="rect"
x="10"
y="10"
rx="10"
ry="10"
height="48"
width="48"
style="stroke: black; fill: none;"
/>
</svg>
</div>
<script>
function TotalLength(){
var path = document.querySelector('#rect');
var len = (path.getTotalLength() );
alert("Path length - " + len);
};
</script>
</body>
</html>
总路径长度为：174.42px
stroke-dasharray属性是演示文稿属性 定义用于绘制轮廓的虚线和间隙的图案 形状；
当图形填充64％时，我们将计算笔划长度：174.42 * 0.64 = 111.62
间隙长度：174.42 * 0.36 = 62.79 stroke-dasharray = 111.62,62.79
<html>
<body>
<div>
<svg width="20%" height="20%" viewBox="0 0 60 60">
<rect id="rect"
x="10"
y="10"
rx="10"
ry="10"
height="48"
width="48"
stroke-dasharray="111.62,62.79"
style="stroke: black; fill: none;"
/>
<text x="20" y ="40" font-size="16px" > 64% </text>
</svg>
</div>
</body>
</html>