作成時または作成後にsvgにdata- *属性を追加する方法

Question

私は、FileSaver.js apiを使用してスナップショットを作成し、保存してsvgとしてダウンロードするキャンバスを持っています。 svgは決してアプリケーションにレンダリングされず、作成後に直接ダウンロードされます。

私の質問は、カスタムdata-*タグからのsvgにいくつかの設定を追加する必要があります。どうやってこれが起こる必要があるのか​​、私は分からない。いったん私はブロブを持って、前に私は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); 
 
}