Jquery:如何通过翻译过滤器值对 SVG g 元素进行排序? [英] Jquery: How to sort SVG g element by translate filter value?

问题描述

您知道如何通过平移 x 值对 SVG 组元素进行排序吗?代码如下:

Do you know how to sort SVG group elements by translate x value? Here is the code:

<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.我想按该元素的 x 值对这 3 个组进行排序，然后附加回同一个 SVG.

As you can see x values of each element is 479,874, and 643. I want to sort these 3 groups by that element's x value and append back to same 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>

推荐答案

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

If you are interested in a slightly different way of doing it with lots of ES6 and functional ideas:

我稍微修改了示例，以通过添加 <text/> 来显示组在 SVG 上绘制的顺序(按照它们在 DOM 中出现的顺序)和 元素.所以在它看起来像这样之前:

I modified the example a bit to show the order by the order in which the groups are painted on the SVG (in the order they appear in the DOM) by adding <text/> and <rect/> elements. So before it looks like this:

然后看起来像这样:

即<g class="element" transform="translate(479, 247) scale(1)">...</g> 最后绘制，因为它是 标签.

i.e. <g class="element" transform="translate(479, 247) scale(1)">...</g> is painted last because it is the last child of the <svg/> tag.

代码在下面，codepen在这里:https://codepen.io/Alexander9111/pen/PowLQZO

Code is below and codepen here: 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:

And 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 平移排序.

You could adapt the line return getValue(b)[0] - getValue(a)[0]; to a - b and then it sorts ascending instead of descending. Also you can change the index from (a)[0] to (a)[1] to sort by y-translation instead.

这篇关于Jquery:如何通过翻译过滤器值对 SVG g 元素进行排序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！