javascript - 通过 JavaScript 访问 SVG 数据

Question

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

用户创建的对象数据动态附加到 SVG 根。此 SVG 数据存储在哪里以及如何存储，以及我如何访问它？我想阅读它的原因是我想将此 SVG 数据转换为 HTML5 Canvas (使用 Google 的 canvg )，最后将其转换为 png 图像以存储在我们的数据库中以供引用。

任何指导将不胜感激。

Answer 1

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

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

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

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

   var svg = document.getElementsByTagName('svg')[0];
   var kids = svg.childNodes;
   for (var i=0,len=kids.length;i<len;++i){
     var kid = kids[i];
     if (kid.nodeType!=1) continue; // skip anything that isn't an element
     switch(kid.nodeName){
       case 'circle':
         // ...
       break;
       case 'path':
         // ...
       break;
       // ...
     }
   }
   

   参见 SVG DOM reference有关可用属性和方法的更多信息，或仅使用 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 元素及其 many drawing commands .

2. 根据 this answer和 this paper ，使用 XMLSerializer 接口(interface)获取 SVG 作为标记，直接使用它作为 img 的源，然后 drawImage 到 Canvas 。使用我上面的例子:

   var svg_xml = (new XMLSerializer).serializeToString(svg);
   console.log(svg_xml);
   // "<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" viewBox="-350 -250 700 500">
   // <circle r="200" class="face" fill="red"/>
   // <path fill="none" class="face" transform="translate(-396,-230)" d="M487.41,282.411c-15.07,36.137-50.735,61.537-92.333,61.537         c-41.421,0-76.961-25.185-92.142-61.076"/>
   // <circle cx="-60" cy="-50" r="20" fill="#000"/>
   // <circle cx="60" cy="-50" r="20" fill="#000"/>
   // </svg>"
   var ctx = myCanvas.getContext('2d');
   var img = new Image;
   img.onload = function(){ ctx.drawImage(img,0,0); };
   img.src = "data:image/svg+xml;base64,"+btoa(svg_xml);
   

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

   请注意，根据 this question/answer (我的)，如果你想要 IE9 兼容性，你必须在 将 src 设置为数据 URL 之前设置 onload 属性。

   不幸的是，由于可能或不可能是 a bug ，将 data-url 图像绘制到 Canvas 会导致 origin-clean 标志设置为 false，这意味着您将无法调用 toDataURL() Canvas 并取回您的 PNG。所以……

3. 我想对于您对 Client-modified SVG->Canvas->PNG-on-server 的特定需求，您需要使用上面的第一步来序列化 svg_xml 然后那个原始来源canvg .

或者，您可以考虑按照上述方法序列化 SVG 并将其直接提交到您的服务器并执行 server-side SVG-to-PNG conversion .