title: Jquery: How to sort SVG g element by translate filter value?
body: <p>Do you know how to sort SVG group elements by translate x value?
  Here is the code:</p>
  
  <pre><code>&lt;svg&gt;
   &lt;g class="element" transform="translate(479, 247) scale(1)"&gt;...&lt;/g&gt;
   &lt;g class="element" transform="translate(874, 145) scale(1)"&gt;...&lt;/g&gt;
   &lt;g class="element" transform="translate(643, 356) scale(1)"&gt;...&lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Expected Result:</p>
  
  <pre><code>&lt;svg&gt;
   &lt;g class="element" transform="translate(874, 145) scale(1)"&gt;...&lt;/g&gt;
   &lt;g class="element" transform="translate(643, 356) scale(1)"&gt;...&lt;/g&gt;
   &lt;g class="element" transform="translate(479, 247) scale(1)"&gt;...&lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>