如何反轉svg元素的順序

我正在使用以下 svg 元素

<svg class="layer1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
    <rect class="bg" id="bg" width="150" height="150" fill="#e6e6e6"></rect>
    <circle class="circ0" id="circ0" cx="75" cy="75" r="72" fill="none" stroke="blue" stroke-linecap="round" stroke-linejoin="round"></circle>
    <circle class="circ1" id="circ1" cx="75" cy="75" r="69" fill="none" stroke="green" stroke-linecap="round" stroke-linejoin="round"></circle>
    <circle class="circ2" id="circ2" cx="75" cy="75" r="66" fill="none" stroke="red" stroke-linecap="round" stroke-linejoin="round"></circle>
    <script href="index.js"></script>  
</svg>

我想用javascript顛倒這些圓圈的順序，我目前正在這樣做

const svg = document.querySelector("svg");

var x = document.querySelectorAll("[class^='circ']");
var bucket = [];
x.forEach((a, i) => {
    bucket.push(a)
});

bucket.reverse();

x.forEach(
    (a, i) => a.parentNode.removeChild(a)
);

bucket.forEach(
    (a, i) => {
        a.setAttribute("class", 'circ'   [i]);
        a.setAttribute("id", "circ"   [i]);
        svg.appendChild(a);
    }
)

<svg class="layer1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
    <rect class="bg" id="bg" width="150" height="150" fill="#e6e6e6"></rect>
    <circle class="circ0" id="circ0" cx="75" cy="75" r="72" fill="none" stroke="blue" stroke-linecap="round" stroke-linejoin="round"></circle>
    <circle class="circ1" id="circ1" cx="75" cy="75" r="69" fill="none" stroke="green" stroke-linecap="round" stroke-linejoin="round"></circle>
    <circle class="circ2" id="circ2" cx="75" cy="75" r="66" fill="none" stroke="red" stroke-linecap="round" stroke-linejoin="round"></circle>
    <script href="index.js"></script>  
</svg>

它給了我這個

有沒有更好的方法來做到這一點？

uj5u.com熱心網友回復：

append(child)自己移動DOM 節點。所以你的代碼可以被簡化。

但是對于更復雜的 SVG，您可能想要交換DOM 位置，因為您不想影響其他元素。

• 按住CTRL鍵看看會發生什么append
• 單擊以查看交換版本，
  即處理 Array 并將第一個元素與最后一個元素交換。
• 注意：append在 Internet Explorer 中不可用，這就是您看到大多數帖子使用appendChild.
  現代瀏覽器加載了更多的 DOM 好東西：replaceWith after等等before。

<svg viewBox="0 0 10 10" style="height:200px">
  <style>
    text { font-size: 2px }
    [y="3"]{ fill:yellow }
    .first { stroke: black; stroke-width: 0.5 }
  </style>
  <rect class="bg" id="bg" width="10" height="10" fill="grey"></rect>
  <circle class="first" id="c0" cx="2" cy="5" r="2" fill="red" />
  <text x="0" y="3">R</text>
  <circle class="second" id="c1" cx="4" cy="5" r="3" fill="green" />
  <text x="1" y="3">G</text>
  <circle class="last" id="c2" cx="6" cy="5" r="4" fill="blue" />
  <text x="2" y="3">B</text>
  <text x="1" y="6">Click Me!</text>
</svg>
<script>
  let svg = document.querySelector("svg");
  function append() {
    [...svg.querySelectorAll("circle")]
    .reverse().forEach((c, i) => {
                    c.parentNode.append(c);
                    c.setAttribute("class", c.id = 'c'   i);
                    });
  }
  function swap() {
    function swapElements(e1, e2) {
      let {id,previousSibling,className:{baseVal:c2}} = e2;
      e1.after(e2); // put e2 after e1
      e2.id = e1.id; e2.setAttribute("class", e1.getAttribute("class"));
      previousSibling.after(e1); // put e1 after where e2 WAS
      e1.id = id;    e1.setAttribute("class", c2);
    }
    let circles = [...svg.querySelectorAll("circle")];
    while (circles.length) {
      let c1 = circles.shift();
      if (circles.length) swapElements(c1, circles.pop())
    }
  }
  svg.onclick = (e) => (e.ctrlKey && append()) || swap();
</script>

標籤：javascript html svg

上一篇：react-native-svg-填充兩個橢圓的重疊區域

下一篇：升級vue-cli(vue-svg-loader)后Vuesvgs停止作業