Question

我只是想从以下网址解析此svg的一些数据：http://colorillo.com/bxys.inline.svg 当我查看页面的源代码时。我想解析points和stroke数据，然后使用console.log（）

将其发送到Google的控制台

我的代码如下所示，这是我试图做的，但是没有运气将其打印到控制台中。

    var url = new url("http://colorillo.com/bxys.inline.svg");

    url = function(e) {
    var obj = JSON.parse(e.data);
    var points = JSON.stringify(obj.points)
    var stroke = JSON.stringify(obj.stroke)
    }

    console.log(points)
    console.log(stroke)

Answer 1

您的代码存在各种问题，例如两次定义url。您可能想使用fetch API来获取它。您必须在colorillo.com上运行代码或在您自己的服务器上托管文件，因为他们尚未设置CORS来允许您从另一个网站访问文件。

SVG是XML的方言，而不是JSON。您需要使用DOMParser：

// Create request to fetch the SVG file.
xhr=new XMLHttpRequest();
// Tell the request where the file is.
xhr.open("GET", "http://colorillo.com/bxys.inline.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'));
  console.log(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,
      pl.style.strokeLinejoin,
      pl.style.strokeLinecap
    ]
  ));
});
xhr.send();

如何在JavaScript中使用JSON.parse（）从网址解析svg数据？

1 个答案: