如何在创建时或创建后向 svg 添加 data-* 属性 [英] How to add a data-* attribute to svg on or after creation

问题描述

我有一个画布，我正在使用 FileSaver.js api 从中创建快照并保存和下载为 svg.svg 永远不会渲染到应用程序，它会在创建后直接下载.

我的问题是，我需要在自定义 data-* 标记的 from 中向 svg 添加一些设置.我无法弄清楚这需要如何或在哪里发生.一旦我有 blob 并且在我调用 saveAs 之前或在它被创建之后?但是如何获得对它的引用.以下是我迄今为止尝试过的.

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

以上创建和下载 svg 非常好，但我不知道如何添加自定义数据设置属性.我也试过首先创建一个文件如下，

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

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

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

解决方案

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

getFrame

的推测部分内容

getFrame: function() {var svg = document.createElementNS(svgNS, 'svg');svg.dataset.settings = your_data;//在这里设置数据属性//... 将大量元素附加到 svg 以生成 svg 图像//...返回新的 XMLSerializer().serializeToString(svg);//返回标记}

现在，由于您没有提供这个 getFrame 方法，我假设您没有提供它，并且您可能很难对其进行调整.

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

var svgStr =/*this.*/getFrame();//获取标记//(重新)将此字符串解析为 SVG 文档var svgDoc = new DOMParser().parseFromString(svgStr, 'image/svg+xml');//设置你的属性svgDoc.documentElement.dataset.settings = "foo-bar";//重新序列化svgStr = new XMLSerializer().serializeToString(svgDoc.documentElement);//保存修改后的标记saveAs(new Blob([svgStr], {type:'image/svg+xml'}));函数 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"/><脚本>警报(document.documentElement.dataset.settings)；<\/脚本></svg>`}//用于演示显示在 <object>而不是储蓄函数另存为(blob){var obj = document.createElement('object');obj.data= URL.createObjectURL(blob);document.body.appendChild(obj);}

I have a canvas that I am creating a snapshot from and saving and downloading as an svg using the FileSaver.js api. The svg never gets rendered to the app, it is directly downloaded after creation.

My question is, I need to add some settings to the svg in the from of a custom data-* tag. I can't work out how or where this needs to happen. Once I have the blob and before I call saveAs or after it has been created? But then how to get a reference to it. Below is what i have tried thus far.

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

The above creates and downloads the svg perfectly fine, but I can't work out how to add a custom data-settings attribute. I've also tried first creating a file as below,

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

which allows me to see more details of the file, but again i can't work out how to save a data-settings attribute before calling saveAs.

Any help would would be hugely appreciated. Thanks

解决方案

The best would be to do it in the this.getFrame() method.
This method will certainly create a parsed SVG document, before returning its serialization to string.
From this parsed SVG doc will you add this attribute.

Speculative partial content of 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
}

Now, since you didn't provided this getFrame method, I will assume you didn't made it, and that it may be hard for you to tweak it.

So one way, after you've got the markup, is to re-parse this markup, add your attribute, and re-serialize it again...

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);
}

这篇关于如何在创建时或创建后向 svg 添加 data-* 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！