通过 JavaScript 访问 SVG 数据

Question

我正在开发一个使用 SVG 和 SVG 的 Web 应用程序。 JS。一切进展顺利，但我对数据处理有点困惑。

用户创建的对象的数据会动态附加到 SVG 根。哪里&这个 SVG 数据是如何存储的，&我怎样才能访问它？我想阅读它的原因是我想将此 SVG 数据转换为 HTML5 画布（使用 Google 的 canvg< /a>），最后将其转换为 png 图像以存储在我们的数据库中以供参考。

任何指导将不胜感激。

Answer 1

当 Web 浏览器加载 SVG 文件时，它（粗略地）解析字节流并在内存中为 SVG 文件创建 DOM 结构。当脚本动态创建新元素并将其附加到文档时，正是这种内存中的表示形式被修改。

您可以在这里看到一个非常简单的示例：
http://phrogz.net/svg/svg_in_xhtml5.xhtml
SVG 文件在脸部背景中加载一个圆圈，然后 JavaScript 动态创建眼睛和鼻子，并将它们附加为 SVG 元素的子元素。

据我所知，您可以通过三种方式访问​​此信息并将其放入画布中：

1. 您可以自己遍历元素的 DOM，并发出画布上下文绘制命令：

   var svg = document.getElementsByTagName('svg')[0];
   var kids = svg.childNodes;
   for (var i=0,len=kids.length;i

   有关属性和方法的更多信息，请参阅 SVG DOM 参考您可以使用，或者仅使用 DOM 2 Core 方法获取属性。为简单起见，您可能希望使用后者。

   例如，您可以通过 var cx = Kid.cx.baseVal.value; 使用 SVG DOM 访问圆的当前（非 SMIL 动画）cx code> 或者您可以更简单地执行 var cx = Kid.getAttribute('cx');。

   这将很简单，因为 SVG 和 Canvas 有类似的命令（例如 rect 或 line），但它们不完全匹配时需要做一些工作（例如，circle 与 arcTo、polyline 作为一系列 lineTo 命令），并且为做了大量工作code>path 元素及其许多绘图命令。

2. 根据这个答案和本文，使用 XMLSerializer 接口将 SVG 作为标记返回，直接将其用作 img 的源，然后将其 drawImage 绘制到画布上。使用我上面的例子：

   var svg_xml = (new XMLSerializer).serializeToString(svg);
   控制台.log(svg_xml);
   // ""
   var ctx = myCanvas.getContext('2d');
   var img = 新图像；
   img.onload = function(){ ctx.drawImage(img,0,0); };
   img.src = "数据:image/svg+xml;base64,"+btoa(svg_xml);
   

   如果您在 XHTML 中有 SVG（如我的示例），序列化将不会捕获 SVG 块外部定义的样式（如我的示例），因此它们不会应用于图像中。

   请注意，每个这个问题/answer（我的），如果您想要 IE9，则必须先设置 onload 属性，然后再将 src 设置为数据 URL兼容性。

   不幸的是，由于可能是也可能不是错误，将 data-url 图像绘制到画布上会导致 origin-clean 标志被设置为 false，这意味着您将无法在画布上调用 toDataURL()画布并恢复您的 PNG。所以...

3. 我想，为了满足您对客户端修改的 SVG->Canvas->PNG-on-server 的特定需求，您将需要使用上面的第一步来序列化 svg_xml然后将该原始源传递给 canvg。

或者，您可以考虑按照上述序列化 SVG 并将其直接提交到您的服务器并执行 服务器端 SVG 到 PNG 转换。

Answer 2

@Phrogz 答案中提到的 webkit bug 似乎已在更新的版本中修复，所以我找到了一个不需要手动解析的解决方案，它

// from http://bl.ocks.org/biovisualize/1209499
// via https://groups.google.com/forum/?fromgroups=#!topic/d3-js/RnORDkLeS-Q
var xml = d3.select("svg")
  .attr("title", "test2")
  .attr("version", 1.1)
  .attr("xmlns", "http://www.w3.org/2000/svg")
  .node().parentNode.innerHTML;

// from http://webcache.googleusercontent.com/search?q=cache:http://phpepe.com/2012/07/export-raphael-graphic-to-image.html
// via http://stackoverflow.com/questions/4216927/problem-saving-as-png-a-svg-generated-by-raphael-js-in-a-canvas
var canvas = document.getElementById("myCanvas")
canvg(canvas, svgfix(xml));
document.location.href = canvas.toDataURL();

需要
https://code.google.com/p/svgfix/ 和 https://code.google.com/p/canvg/ 并使用 d3.js 获取 svg 源，这在没有 d3.js 的情况下也应该是可行的（但这需要添加所需的元数据，这在丢失时可能会导致问题）。