5

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

4

5 回答 5

3

您可以访问浏览器提供的完整 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 提供此信息）。

于 2013-09-10T14:56:59.597 回答
0

回答您的问题的第一部分：

如果您试图通过控制台定位 svg 标签，您可以通过以下方式获取它： document.getElementsByTagName('svg')[0] 如果页面上嵌入了多个 svg，则更改 [0]（或将其删除）以捕获正确的部分。从那里，您可以右键单击以在元素面板中查看该 svg 元素，然后从那里复制为 xhtml。（我在这个页面上试过这条线：http: //www.w3schools.com/html/html5_svg.asp）

于 2013-09-10T14:58:16.470 回答
0

在 webkit 浏览器中，您可以右键单击 SVG 元素并选择“检查元素”。这将打开 Web Inspector 工具。通常从那里您可以右键单击 svg 节点和“复制为 HTML”，或从控制台类型$0.outerHTML

然后将 SVG 粘贴到本地文档中。然后，您可以使用phantomjs 对其进行光栅化。

旧版本的 Opera（v12 及更早版本）具有独特的右键单击 SVG 图像和“复制图像”的功能；这会将光栅图像放在剪贴板上 - （我在当天滥用了这个功能。） - 免责声明：我使用的是 Mac，在 Windows 上可能会有所不同。

于 2013-09-13T21:42:19.770 回答
0

一直在看这个并遇到了svg-crowbar - 一个特定于 chrome 的书签。您将它放在书签栏上，然后在带有 SVG 的页面上单击书签。一个框将悬停在每个带有下载按钮的 SVG 上。

下载的 SVG 还包括相关的样式信息，以防 SVG 使用 CSS 进行样式设置。

于 2015-03-17T12:16:29.703 回答
0

适合我的解决方案（在 Mac 上）：

1 - 将徽标拖到桌面（任何浏览器）

在某些情况下，页面代码允许您将 .SVG 文件从网站直接拖到桌面或所选文件夹中。超级简单！

在此处输入图像描述

2 - 打印到 PDF（Safari、Firefox）

这需要更多的工作，现在可能总是有效。在“打印”对话框中，转到 PDF > 另存为 PDF。预览应该允许您查看徽标是否将被导出（有时，它不起作用）。导出后，您可以在您选择的矢量编辑应用程序中打开文件。

3 - 从 Chrome 的 Inspector 拖放

这可能在绝望的情况下起作用。检查徽标元素，并将鼠标悬停在其名称上。将出现一个带有缩略图的小窗口，其中包含徽标。单击小徽标，将其拖到文件夹中。

在此处输入图像描述

可能还有上面提到的其他解决方案（复制代码并以某种方式转换它 - 在第三个网站示例中，我展示了这不起作用，因为代码看起来像这样，或者SVG Crowbar有时也可以工作（有时不是 - 就像下载框重叠）。

于 2020-11-16T21:51:52.727 回答