javascript 从网站保存/抓取 svg 到本地机器或转换为图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18721805/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Save/ Grab svg from website to local machine or convert to image
提问by NGix
Is there a way how I can grab html svg from a webpage using js console in Chrome e.g.? Svg code is wrapped with svg tag. And is it possible to save svg to local machine? or convert it to the image? and is it possible to import svg data ( e.g. charts/ graphs ) to google docs or excel?
有没有办法如何在 Chrome 中使用 js 控制台从网页中获取 html svg 例如？Svg 代码用 svg 标签包裹。是否可以将 svg 保存到本地机器？或将其转换为图像？是否可以将 svg 数据（例如图表/图形）导入 google docs 或 excel？
采纳答案by collapsar
You have access to the complete dom and the js objects provided by the browser ( eg. a xpath processor) as well as external libraries.
您可以访问浏览器提供的完整 dom 和 js 对象（例如 xpath 处理器）以及外部库。
so all you need is a unique identification of the svg element in question.
所以你所需要的只是有问题的 svg 元素的唯一标识。
start off importing jquery on the fly and selecting all svg elements on the page. this assumes that you have loaded the page you are investigating and have opened the console. the following statements should be entered at the command prompt:
开始即时导入 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');
the last command will provide you with a dom fragment containing the svg element.
最后一个命令将为您提供一个包含 svg 元素的 dom 片段。
the preceding vanilla javascript commands add a script element referencing the jquery library to the current web page. jquerysimplifies the dom handling substantially, however, it is not necessary strictly speaking (see fr32c's answer).
前面的 vanilla javascript 命令将引用 jquery 库的脚本元素添加到当前网页。jquery大大简化了 dom 处理，但是，严格来说没有必要（参见 fr32c 的回答）。
if you're done, choose the 'reveal in elements panel' entry of the context menu of the console output just generated. you'll be redirected to the element inside a folding hierarchy representation of the page dom. choose 'copy as html' from the context menu of the svg element selected. save the clipboard data as a svg file.
如果完成，请选择刚刚生成的控制台输出的上下文菜单的“在元素面板中显示”条目。您将被重定向到页面 dom 的折叠层次结构表示内的元素。从所选 svg 元素的上下文菜单中选择“复制为 html”。将剪贴板数据保存为 svg 文件。
Note
笔记
in chrome (29) and opera (12), jquery is imported in the console, which reduces the element query to $('svg')(thanks to Ir0nm for this information).
在chrome（29）和opera（12）中，控制台导入jquery，将元素查询减少到$('svg')（感谢Ir0nm提供此信息）。
回答by fr32c
Answering part one of your question :
回答你的问题的第一部分：
If you're trying to locate the svg tag by the console, you can get it with :
document.getElementsByTagName('svg')[0]if you have multiple svgs embedded on the page, change the [0] (or remove it) to catch the right part.
From there, you could right click to view that svg element in the elements panel, and from there copy as xhtml. (i tried that line with this page : http://www.w3schools.com/html/html5_svg.asp)
如果您试图通过控制台定位 svg 标签，您可以通过以下方式获取它：
document.getElementsByTagName('svg')[0]如果页面上嵌入了多个 svg，请更改 [0]（或删除它）以捕获正确的部分。从那里，您可以右键单击以在元素面板中查看该 svg 元素，然后从那里复制为 xhtml。（我在这个页面上尝试了这一行：http: //www.w3schools.com/html/html5_svg.asp）
回答by firien
In webkit browsers you can right click on SVG element and choose "Inspect Element". this will open the Web Inspector tool. Typically from there you can right click on the svg node and "Copy As HTML", or from the console type $0.outerHTML
在 webkit 浏览器中，您可以右键单击 SVG 元素并选择“检查元素”。这将打开 Web Inspector 工具。通常，您可以从那里右键单击 svg 节点和“复制为 HTML”，或从控制台类型$0.outerHTML
Then paste SVG into a local document. You could then use phantomjsto rasterize it.
然后将 SVG 粘贴到本地文档中。然后您可以使用phantomjs 对其进行光栅化。
Old versions of Opera (v12 and older) had the unique ability to right click the SVG image, and "Copy Image"; this would put a raster image on your clipboard - (I abused this feature back in the day.) - disclaimer: i use a mac, may be different on windows.
旧版本的 Opera（v12 及更早版本）具有右键单击 SVG 图像和“复制图像”的独特功能；这会在你的剪贴板上放置一个光栅图像 - （我在那天滥用了这个功能。） - 免责声明：我使用的是 Mac，在 Windows 上可能会有所不同。
回答by Hamish Downer
Just been looking at this and came across svg-crowbar- a chrome specific bookmark. You put it on your bookmark bar, and on a page with SVG you click on the bookmark. A box will hover over each SVG with a download button.
刚刚在看这个并遇到了svg-crowbar- 一个 chrome 特定的书签。您将其放在书签栏上，然后在带有 SVG 的页面上单击书签。一个框将悬停在每个带有下载按钮的 SVG 上。
The downloaded SVG also includes the relevant style information, in case the SVG has been styled using CSS.
下载的 SVG 还包括相关的样式信息，以防 SVG 已使用 CSS 设置样式。
