如何使用 JavaScript 中的 JSON.parse() 从 url 解析 svg 折线数据？

Question

我只是想从这个 url:http://colorillo.com/bxys.inline.svg 解析这个 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() 从 url 解析 svg 折线数据？

How to parse svg polyline data from url using JSON.parse() in JavaScript?

javascript

jquery

tampermonkey