通过JS交换html元素

let parent = document.querySelector('.pentagon2');
document.querySelector('.btn').addEventListener('click', _ => {
  let figures = document.querySelectorAll("svg");

  let shuffle = function(arr) {
    for (let i = arr.length - 1; i > 0; i--) {
      let tmp = arr[i];
      let rnd = Math.floor(Math.random() * (i + 1));
      arr[i] = arr[rnd];
      arr[rnd] = tmp;
    }
    return arr;
  }

  parent.append(...shuffle(Array.from(figures)));

})

svg {
  width: 70px;
  height: 70px;
}

<div class="container2">
  <div class="pentagon2">
    <svg width="250" height="250" viewBox="-1 0 101 100">
                    <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="blue"/>
                </svg>
    <svg width="250" height="250" viewBox="-1 0 101 100">
                    <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="red"/>
                </svg>
    <svg width="250" height="250" viewBox="-1 0 101 100">
                    <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="green"/>
                </svg>
    <svg width="250" height="250" viewBox="-1 0 101 100">
                    <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="black"/>
                </svg>
    <svg width="250" height="250" viewBox="-1 0 101 100">
                    <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="yellow"/>
                </svg>
    <svg width="250" height="250" viewBox="-1 0 101 100">
                    <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="orange "/>
                </svg>
    <svg width="250" height="250" viewBox="-1 0 101 100">
                    <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="violet"/>
                </svg>
    <svg width="250" height="250" viewBox="-1 0 101 100">
                    <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="blue"/>
                </svg>
  </div>
</div>
<button class="btn">Перемешать</button>