Question

在我的应用中，用户可以在SVG中制作小图，我使用React渲染。我想将SVG上传到我的服务器。

如何将SVG渲染为Javascript图像，以便将其上传到我的服务器？谷歌搜索不会返回有意义的结果。

Answer 1

这不是特定的反应，但是要将文档function svgNodeToBlob(node) { // first an doctype var svgDocType = document.implementation.createDocumentType('svg', "-//W3C//DTD SVG 1.1//EN", "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"); // then a new SVG Document var svgDoc = document.implementation.createDocument('http://www.w3.org/2000/svg', 'svg', svgDocType); // set its documentElement to our root svg node (well a clone of it) svgDoc.replaceChild(node.cloneNode(true), svgDoc.documentElement); // serialize the document var svgData = (new XMLSerializer()).serializeToString(svgDoc); // convert to a blob var blob = new Blob([svgData], { type: 'image/svg+xml; charset=utf8' }); return blob; } var blob = svgNodeToBlob(document.querySelector('svg')); // from here you can send the blob to your server // for the demo, we'll just make an downloadable link from it var a = document.querySelector('a'); a.href = URL.createObjectURL(blob); a.download = 'mycoolsvgfile.svg';转换为svg文件，您只需将其标记序列化为字符串（cf XMLSerializer）并将结果字符串附加到Blob并将Blob上传到您的服务器。

但是如果你想要一个完整的独立svg文档，有doctype和namespace，这里有一个如何做的例子：

<svg>
  <rect width="50" height="50" x="20" y="10"/>
</svg>
<a>download as file</a>

navigateIfUserIsLogdIn(){
    this.authState = this.afAuth.authState;
    this.user = this.afAuth.auth.currentUser;

    this.afAuth.auth.onAuthStateChanged((user) => {
      if (user) {
        // User is signed in.
        this.navCtrl.setRoot(HomePage);
      } else {
        // No user is signed in.
      }
    });
}

但请注意，对您的节点有影响的所有外部资源都不会存在于文件中（即，如果您使用外部样式表中的CSS进行样式设置）。在这种情况下，在将其附加到SVG文档之前，必须在克隆节点中附加这些外部元素的克隆。

上传React渲染的SVG

1 个答案: