在一些情况下，我们想要将类似d3.js之【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】类的框架渲染的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【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。ref只支持url，所以，我们要创建一个【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。函数来获得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原创内容，盗版必究。【原创内容，转载请注明出处】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【未经授权禁止转载】转载请注明出处：www.tangshuang.netload之前，要进行一个转码，我们用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著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】e64然后渲染到canvas里面，变成了【转载请注明来源】【作者：唐霜】位图。

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