Jquery: Как отсортировать элемент SVG g по значению фильтра перевода?

Question

Знаете ли вы, как сортировать элементы группы SVG путем перевода значения x? Вот код:

<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 каждого элемента - 479 874, и 643. Я хочу отсортировать эти 3 группы по значению x этого элемента и добавить обратно в тот же 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>

Answer 1

Вы можете использовать jQuery sort и некоторые логи синтаксического анализа строки c, чтобы получить ваш первый параметр translate:

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');

Answer 2

Если вас интересует немного другой способ сделать это с большим количеством ES6 и функциональных идей:

Я немного изменил пример, чтобы показать порядок в том порядке, в котором группы изображены на SVG (в порядке их появления в DOM) путем добавления элементов <text/> и <rect/>. Итак, прежде чем это будет выглядеть так:

Затем после это будет выглядеть так:

т.е. <g class="element" transform="translate(479, 247) scale(1)">...</g> окрашен последним, потому что это последний дочерний элемент тега <svg/>.

Код ниже и здесь кодовая ручка: https://codepen.io/Alexander9111/pen/PowLQZO

HTML:

<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>

И Javascript:

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);
});

Вы можете адаптировать строку return getValue(b)[0] - getValue(a)[0]; к a - b и затем сортировать по возрастанию вместо по убыванию. Также вы можете изменить индекс с (a)[0] на (a)[1] для сортировки по y-переводу.