setAttribute -在单个属性上设置两个随机数值

Question

我需要在同一个属性上生成两个随机值。两个介于5和35之间的数值在SVG中创建随机长度的虚线。

下面是理想的输出

<path stroke-dasharray="20 7" /> 
<path stroke-dasharray="9 27" /> 
<path stroke-dasharray="13 33" /> 

这就是我用来生成单个属性值的方法

    rect.setAttribute("stroke-dasharray", Math.floor(Math.random() * 30 + 5));

在这里，实际上是https://jsfiddle.net/6a42rsty/，而不是因为笔划-dasharray属性中只有一个值，所以线条和间距是相等的。它们应该是不同的

将两个随机值空间分开的最有效方法是什么？

Answer 1

您可以执行以下操作：

function getRandomNum(){
    return Math.floor(Math.random() * 30 + 5);
}

rect.setAttribute("stroke-dasharray", `${getRandomNum()} ${getRandomNum()}`);