xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

SVG & getBBox

https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/getBBox

  const paths = [...svgDOM.querySelectorAll('path')];
  paths.sort((p1, p2) => {
    let bbox1 = p1.getBBox();
    let bbox2 = p2.getBBox();
   // area size ???
    return bbox1.width * bbox1.height > bbox2.width * bbox2.height ? -1 : 1;
  });

demo

https://codepen.io/xgqfrms/pen/dyPxWmx

<?xml version="1.0" encoding="UTF-8"?>
<svg width="503px" height="201px" viewBox="0 0 503 201" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
    <title>Untitled</title>
    <desc>Created with Sketch.</desc>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Group" stroke="#979797">
            <path d="M4.38721467,1.4235713 C59.7165062,1.54698994 115.052053,0.918023607 170.375089,1.79382724 C227.433418,2.69710179 249.992895,63.9728163 239.941091,114.442228 C235.910943,134.677325 212.350177,157.135741 196.017797,167.282477 C164.156433,187.076828 70.6314282,142.459532 58.182101,137.795924 C38.324153,130.356993 31.9738723,115.324132 23.3896517,95.5788692 C9.10509367,62.7217974 3.34577363,43.8445274 1.25793506,10.0733803 L4.38721467,1.4235713 Z" id="Path"></path>
            <path d="M472.25,76.3671875 C449.049028,101.903828 427.709436,153.150454 449.261719,185.628906 C459.747498,201.430568 500.227095,209.243672 501.375,181.515625 C502.37375,157.390456 502.225265,133.208983 501.375,109.078125 C500.481543,83.7214536 481.523964,92.0067994 466.945312,77.5078125" id="Path-2" fill="#D65252"></path>
        </g>
    </g>
</svg>

const addSVG = (svg) => {
  this.bgSVG = svg;
  // 插入 svg
  let div = document.createElement('div');
  div.innerHTML = svg;
  let styleTag = div.querySelectorAll('style')[0];
  if (styleTag) {
    Style.parse(styleTag.innerHTML);
  }
  let polygons = Array.prototype.slice.apply(div.querySelectorAll('polygon'))
  let polylines = Array.prototype.slice.apply(div.querySelectorAll('polyline'))
  let paths = Array.prototype.slice.apply(div.querySelectorAll('path'))
  let rects = Array.prototype.slice.apply(div.querySelectorAll('rect'))
  let texts = Array.prototype.slice.apply(div.querySelectorAll('text'))

  paths.sort((p1, p2) => {
    let bbox1 = p1.getBBox()
    let bbox2 = p2.getBBox()
    return bbox1.width * bbox1.height > bbox2.width * bbox2.height ? -1 : 1
  }).forEach((p) => {
    let result = []
    let pathData = p.getAttribute('d');
    // STEP1: path to points
    let points = pathDataToPolys(pathData, {tolerance: 1, decimals: 1})[0];
    console.log(`points`, points);
    // debugger;
    result = points.map(p => new Point(p[0], p[1]));
    // result = points.map((p) => {
    //   log(p[0], p[1])
    //   return new Point(p[0], p[1])
    // })
    // STEP2: points to polygons
    let polygon = new Polygon(result);
    let fill = Polygon.getFillColorFromNode(p);
    polygon.fill = fill;

    // 存储 Features
    if (result.length) {
      this.$store.dispatch('addFeature', polygon);
    }
  })

  polygons.forEach((p) => {
    let polygon = Polygon.fromSVG(p)
    this.$store.dispatch('addFeature', polygon)
  })

  polylines.forEach((p) => {
    let polygon = Polygon.fromSVG(p)
    this.$store.dispatch('addFeature', polygon)
  })

  // 存储 texts
  texts.forEach((text) => {
    var transform = text.getAttribute('transform')
    var matrixTransform = transform && transform.match(/^matrix(([^)se]+))$/i)
    matrixTransform = matrixTransform && matrixTransform[1]
    var transformX = matrixTransform ? +matrixTransform.split(' ')[4] : 0
    var transformY = matrixTransform ? +matrixTransform.split(' ')[5] : 0
    var x = +text.getAttribute('x')
    var y = +text.getAttribute('y')

    if (x === 0 && y === 0) {
      var tspan = text.getElementsByTagName('tspan')[0]
      if (tspan) {
        x = +tspan.getAttribute('x')
        y = +tspan.getAttribute('y')
      }
    }

    this.$store.dispatch('addText', {
      text: text.textContent.trim(),
      coordinate: new Point(transformX + x, transformY + y)
    })
  })

  rects.forEach((r) => {
    let polygon = Polygon.fromRect(r)
    this.$store.dispatch('addFeature', polygon)
  })
};

---