javascript - 从网站保存/抓取 svg 到本地机器或转换为图像

Question

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

Answer 1

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

所以您所需要的只是相关 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 片段。

前面的 vanilla javascript 命令将引用 jquery 库的脚本元素添加到当前网页。 jquery大大简化了 dom 处理，但是，严格来说没有必要(请参阅 fr32c 的回答)。

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

注意

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