javascript - 如何在创建时或创建后向 svg 添加 data-* 属性

Question

我有一个 Canvas ，我正在使用 FileSaver.js API 从中创建快照并保存并下载为 svg。 svg 永远不会渲染到应用程序，而是在创建后直接下载。

我的问题是，我需要在自定义 data-* 标记中向 svg 添加一些设置。我不知道这需要如何或在哪里发生。获得 Blob 后，在调用 saveAs 之前还是在创建它之后？但是如何获得对它的引用。以下是我到目前为止所尝试过的。

_onExportFrame() {
            var settings = this.settings;
            var svgBlob = new Blob([this.getFrame()], {type: "image/svg+xml;charset=utf-8"});
            saveAs(svgBlob, "snapshot.svg");
}

上面创建并下载了 svg ，但我不知道如何添加自定义数据设置属性。我还尝试首先创建一个文件，如下所示，

_onExportFrame() {
        var settings = this.settings;
        var svg = new File([this.getFrame()], "snapshot.svg", {type: "image/svg+xml;charset=utf-8"});
        saveAs(svg)
}

这使我可以查看文件的更多详细信息，但我再次无法弄清楚如何在调用saveAs之前保存data-settings属性。

任何帮助将不胜感激。谢谢

Answer 1

最好是在 this.getFrame() 方法中执行此操作。
在将其序列化返回为字符串之前，此方法肯定会创建一个已解析的 SVG 文档。
从这个解析的 SVG 文档中，您将添加此属性。

getFrame 的推测部分内容

getFrame: function() {
  var svg = document.createElementNS(svgNS, 'svg');
  svg.dataset.settings = your_data; // here you set the data attribute
  // ... append a lot of elements to svg to generate the svg image
  // ...
  return new XMLSerializer().serializeToString(svg); // return the markup
}

现在，由于您没有提供此 getFrame 方法，我将假设您没有做到这一点，并且您可能很难对其进行调整。

因此，在获得标记后，一种方法是重新解析此标记，添加您的属性，然后再次重新序列化它...

var svgStr = /*this.*/getFrame(); // get the markup
// (re-)parse this string as an SVG doc
var svgDoc = new DOMParser().parseFromString(svgStr, 'image/svg+xml');
// set your attribute
svgDoc.documentElement.dataset.settings = "foo-bar";
// re-serialize
svgStr = new XMLSerializer().serializeToString(svgDoc.documentElement);
// save the modified markup
saveAs(new Blob([svgStr], {type:'image/svg+xml'}));



function getFrame(){
  return `<svg width="120" height="120" viewBox="0 0 120 120"
    xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="100"/>
  <script>
  alert(document.documentElement.dataset.settings);
  <\/script>
</svg>`
}
// for demo displays in an <object> instead of saving
function saveAs(blob){
  var obj = document.createElement('object');
  obj.data=  URL.createObjectURL(blob);
  document.body.appendChild(obj);
}