如何使用Dart将SVG元素保存到静态文件？

Question

如何使用Dart将SVG元素保存到静态文件？

use*_*014 3 svg dom dart

我必须在Dart中使用一些DOM操作来处理SVG元素.在"svg"标记下添加和更改一些元素后,我想将最终的SVG元素导出到静态文件中.有没有API可以做到？

谢谢!

Answer 1

Set*_*add 7

您可以download在<a>元素上使用该属性.这告诉浏览器下载资源而不是导航到它.

您可以使用获取SVG的内容innerHtml.

这是一个例子.

首先,HTML:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Svgtest</title>
    <link rel="stylesheet" href="svgtest.css">
  </head>
  <body>
    <h1>Svgtest</h1>

    <div id="container">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <circle cx="100" cy="50" r="40" stroke="black"
        stroke-width="2" fill="red"/>
      </svg>
    </div>

    <script type="application/dart" src="svgtest.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

接下来,Dart代码:

import 'dart:html';

void main() {
  Element container = query('#container');
  String contents = container.innerHtml;

  Blob blob = new Blob([contents]);
  AnchorElement downloadLink = new AnchorElement(href: Url.createObjectUrlFromBlob(blob));
  downloadLink.text = 'Download me';
  downloadLink.download = 'svg_contents.svg';

  Element body = query('body');
  body.append(downloadLink);
}

Run Code Online (Sandbox Code Playgroud)

以下是浏览器的报道:http://caniuse.com/#feat=download 在撰写本文时,Firefox,Chrome和Opera支持该download属性.

(注意:无法使用HTML5将文件直接保存到本机OS文件系统.)

归档时间：	12 年前
查看次数：	595 次
最近记录：	9 年，6 月前