保存/从网站抓取 svg 到本地计算机或转换为图像

Question

有没有办法在 Chrome 中使用 js 控制台从网页中获取 html svg？Svg 代码用 svg 标签包装。是否可以将 svg 保存到本地计算机？或者将其转换为图像？是否可以将 svg 数据（例如图表/图表）导入到 google docs 或 excel 中？

Answer 1

您可以访问浏览器（例如 xpath 处理器）提供的完整 dom 和 js 对象以及外部库。

因此，您所需要的只是相关 svg 元素的唯一标识。

开始动态导入 jquery 并选择页面上的所有 svg 元素。这假设您已加载正在调查的页面并已打开控制台。应在命令提示符下输入以下语句：

var e = document.createElement('script');
e.setAttribute('type','text/javascript'); 
e.setAttribute('src','http://code.jquery.com/jquery-1.10.2.min.js'); 
(document.getElementsByTagName('head'))[0].appendChild(e);

$('svg');

最后一个命令将为您提供一个包含 svg 元素的 dom 片段。

前面的普通 javascript 命令将引用 jquery 库的脚本元素添加到当前网页。jquery大大简化了 dom 处理，但是，严格来说，这是不必要的（请参阅 fr32c 的答案）。

如果完成，请选择刚刚生成的控制台输出的上下文菜单中的“在元素面板中显示”条目。您将被重定向到页面 dom 的折叠层次结构表示内的元素。从所选 svg 元素的上下文菜单中选择“复制为 html”。将剪贴板数据保存为 svg 文件。

笔记

在chrome（29）和opera（12）中，jquery在控制台中导入，这将元素查询减少到$('svg')（感谢Ir0nm提供此信息）。