Javascript Jquery：如何通过转换过滤器值对SVG g元素进行排序？

您知道如何通过转换x值对SVG组元素进行排序吗？ 代码如下：

<svg>
 <g class="element" transform="translate(479, 247) scale(1)">...</g>
 <g class="element" transform="translate(874, 145) scale(1)">...</g>
 <g class="element" transform="translate(643, 356) scale(1)">...</g>
</svg>

如您所见，每个元素的x值分别为479874和643。 我想按元素的x值对这3个组进行排序，并将其追加回同一个SVG

预期结果：

<svg>
 <g class="element" transform="translate(874, 145) scale(1)">...</g>
 <g class="element" transform="translate(643, 356) scale(1)">...</g>
 <g class="element" transform="translate(479, 247) scale(1)">...</g>
</svg>

您可以使用jQuery排序和一些字符串解析逻辑来检索translate的第一个参数：

您可以使用jQuery排序和一些字符串解析逻辑来检索translate的第一个参数：

---

如果您对使用大量ES6和功能性想法的稍微不同的方法感兴趣：

我稍微修改了这个示例，通过添加和元素，按照组在SVG上的绘制顺序以及它们在DOM中的显示顺序来显示顺序。所以在它看起来像这样之前：

然后它看起来像这样：

i、 e。。。最后绘制，因为它是标记的最后一个子项

下面是代码，这里是代码笔：

HTML:

---

您可以调整行返回getValueb[0]-getValuea[0]；然后按升序而不是降序排序。此外，您还可以将索引从[0]更改为[1]，改为按y平移排序。

如果您对使用大量ES6和功能性想法的稍微不同的方法感兴趣，请：

我稍微修改了这个示例，通过添加和元素，按照组在SVG上的绘制顺序以及它们在DOM中的显示顺序来显示顺序。所以在它看起来像这样之前：

然后它看起来像这样：

i、 e。。。最后绘制，因为它是标记的最后一个子项

下面是代码，这里是代码笔：

HTML:

---

您可以调整行返回getValueb[0]-getValuea[0]；然后按升序而不是降序排序。您还可以将索引从[0]更改为[1]，改为按y平移排序。

谢谢您的帮助！我得到的x值是：var pos=$this.position；我可以用它作为pos.top//这将给出x位置值。现在，我想把它分类。我会试试你的答案。谢谢你的帮助！我得到的x值是：var pos=$this.position；我可以用它作为pos.top//这将给出x位置值。现在，我想把它分类。我会试试你的答案。非常感谢@Alex L这太完美了！：非常感谢@Alex L这太完美了！：

function getValue(input){
    return parseInt(input.outerHTML.substring(input.outerHTML.indexOf('(') + 1, input.outerHTML.indexOf(',')));
}

$('svg g').sort(function(a, b) {
     return getValue(a) < getValue(b) ? 1 : -1;
}).appendTo('svg');

<svg width=1000 height="1000">
 <g class="element" transform="translate(479, 247) scale(1)">
   <rect stroke="blue" fill="blue" x="0" y="0" height="200" width="450"/>
   <text>479</text>
  </g>
 <g class="element" transform="translate(874, 145) scale(1)">
   <rect stroke="red" fill="red" x="0" y="0" height="250" width="300"/>
   <text>874</text>
  </g>
 <g class="element" transform="translate(643, 356) scale(1)">
   <rect stroke="green" fill="green" x="0" y="0" height="200" width="350"/>
   <text>643</text>
  </g>
</svg>

const svg = document.querySelector("svg");
const groups = [...document.querySelectorAll("g")];

groups.map(child => {
   console.log(getValue(child))
});

function getValue(child){
  var transform = child.getAttribute("transform")
    .replace("translate(","")
    .replace(/\) scale.*/i,"");
  return transform.split(",")
    .map(el => parseInt(el));
}

groups.sort((a,b) => {
  return getValue(b)[0] - getValue(a)[0];
})

groups.forEach((el,index) => {
  svg.appendChild(el);
});