Question

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

谢谢！

Answer 1

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

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

这是一个例子。

首先，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>

接下来，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);
}

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

（注意：无法使用HTML5直接将文件保存到本机OS文件系统。）

Answer 2

对于IE 10+：

import 'dart:html';
import 'dart:js';
import "package:js/js.dart";

@JS("navigator.msSaveBlob")
external void msSaveBlob(blob, filename);    

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

  Blob blob = new Blob([contents]);
  if (js.context['navigator']['msSaveBlob'] != null) {
      msSaveBlob(blob, 'svg_contents.svg');
  } else { 
      AnchorElement downloadLink = new AnchorElement(href: Url.createObjectUrlFromBlob(blob));
      downloadLink.text = 'Download me';
      downloadLink.download = 'svg_contents.svg';
      Element body = query('body');
      body.append(downloadLink);
  }
}

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

2 个答案: