Question

我的问题是我的脚本没有按照我想要的方式输出数组数据。

您将在这里看到：https://pastebin.com/raw/3AcEs1gc 这显示了它当前的输出方式（在Google控制台中），以及我希望它如何输出。

我的代码显示在最底部。我只需要在数组的开头添加“ [”，并在其末尾添加“]” 我还需要它在每个成对的数字之后添加这些字符，并在每个成对的数字之后用逗号替换空格。因此，它将输出像这样的示例[[200,100],[250,123]]。＆not like this 200, 400 245, 500 <当前登录Google控制台的方式。

pastebin链接介绍了更多内容。如果您需要更多详细信息，请回复。我会尽力解释。

我的代码：

xhr=new XMLHttpRequest();
// Tell the request where the file is.
xhr.open("GET", "http://someurl.com/blahblah.svg");
// Add event handler to process the file once it's been fetched.
xhr.addEventListener("load", function() {
// Once the text is available, create an XML parser
// and parse the text as an SVG image.
const xmlDoc = new DOMParser().parseFromString(
this.responseText.trim(),
"image/svg+xml"
);
// xmlDoc.getElements() returns something Array-like, but not an Array.
// This turns it into an Array.
const polylines = Array.from(xmlDoc.getElementsByTagName('polyline'));


var Lines = (polylines.map(
pl => [
  // Parses each 'points' attribute into an array of pairs of numbers
  pl.getAttribute('points').split(' ').map(
    pair => pair.split(',').map(x=>+x)
  ),
  // Various stroke information

  // Convert rgb(R,G,B) to #RRGGBB
  // Leading hash, then pull out the digits with a regex
  '#' + pl.style.stroke.match(/rgb\((\d*), (\d*), (\d*)\)/)
    // Throw away everything but the digits
    .slice(1,4)
    // Convert to a number, render in hex, uppercase, pad with 0s
    .map(x=>(+x).toString(16).toUpperCase().padStart(2,'0'))
    // Concatenate the hex digits
    .join(''),
  +pl.style.strokeWidth,

    ]
));
console.log(Lines)  // Logs the arrays to console.
});
xhr.send();

Answer 1

使用SVGPolylineElement可用的SVGPointList接口提取其中包含的所有SVGPoints。然后，您只需要将所有这些SVGPoints x和y属性映射到等效的[x, y]数组：

makeSVGPointListIterable();

const polyline = document.querySelector('polyline');
console.log(parsePoints(polyline));

function parsePoints(elem) {
  return [...elem.points] // convert to an Array so we can map its content
    .map((pt) => [pt.x, pt.y]); // convert to an Array
}






// small monkey patch for Safari
function makeSVGPointListIterable() {
  const proto = SVGPointList.prototype;
  if (typeof proto[Symbol.iterator] !== 'function') {
    proto[Symbol.iterator] = function() {
      let current = 0;
      return {
        next: () => {
          const is_done = current === this.numberOfItems;
          return {
            done: is_done,
            value: is_done || this.getItem(current++)
          }
        }
      };
    }
  }
}

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- even with stoopid new lines in the attribute -->
  <polyline points="100,100 150,25 150,75
    200,0" fill="none" stroke="black" />
</svg>

Answer 2

您可以使用JSON.stringify()

console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]));

将输出以下内容：

“ [3，” false“，false]”

如何将SVGPolyline的点提取为2D数组

2 个答案: