在一些情况下，我们想要将类似d3.js之【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。类的框架渲染的svg保存到本地，这要怎么【本文受版权保护】【未经授权禁止转载】实现呢？其实非常简单。

首先，让我们创建一个用来下载的函数，这个【本文受版权保护】转载请注明出处：www.tangshuang.net函数不仅仅支持svg，甚至可以支持任意内【本文受版权保护】【原创内容，转载请注明出处】容。

function download(href,  name) {
    var a = document.createElement('a');

    a.download = name;
    a.href = href;

    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

我们创建了一个通用的下载函数，但是这个h本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】ref只支持url，所以，我们要创建一个【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】函数来获得svg的url。

function createObjectUrl(content, type) {
  return window.URL.createObjectURL(new Blob(content, { type: type }))
}

这个函数的content是可以支持多个类【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】型的，因为它会被传入new Blob中，原创内容，盗版必究。【原创内容，转载请注明出处】但是需要注意，如果传入字符串，要传入一个【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net数组。

download(createObjectUrl(['<div></div>'], 'text/html'), 'index.html')

现在就好办了，我们只要把svg元素的ou转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。terHTML读出来，然后传给downl著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。oad函数就可以了。

download(createObjectUrl([document.querySelector('svg').outerHTML, 'image/svg'), 'some.svg')

对上面操作进行简单封装本文版权归作者所有，未经授权不得转载。

function downloadSvg(svg, name) {
  download(createObjectUrl([document.querySelector(svg).outerHTML, 'image/svg'), name)
}

如果要下载为其他类型的图片，那在down【未经授权禁止转载】【原创不易，请尊重版权】load之前，要进行一个转码，我们用ca【未经授权禁止转载】【原创不易，请尊重版权】nvas作为中转，把svg放到一个can【本文受版权保护】原创内容，盗版必究。vas中之后在下载。

function downloadSvgAsPng(svg, name) {
  const text = document.querySelector(svg).outerHTML
  const { width, height } = svg // 或者通过其他方式也可以获得宽高
  const image = new Image()
  image.onload = () => {
    const canvas = document.createElement('canvas')
    canvas.width = width
    cnavas.height = height
    const context = canvas.getContext('2d')
    context.fillStyle = context.createPattern(image, 'repeat')
    context.fillRect(0, 0, width, height)
    download(canvas.toDataURL('image/png'),  name)
  }
  image.src = 'data:image/svg+xml;base64,' + btoa(text)
}

此处我们没有用到createObject著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。Url，因为我们直接将svg转化为bas【原创内容，转载请注明出处】【版权所有，侵权必究】e64然后渲染到canvas里面，变成了【原创内容，转载请注明出处】【本文首发于唐霜的博客】位图。

最后，需要注意的是，使用这种方法，我们必原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。须在svg内完全定义自身的样式，如果你是未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。在svg之外定义了svg内部元素的样式，著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。那么下载的svg就不包含这部分样式，那自【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】然就会有样式问题。