上传一个反应渲染的SVG

Question

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

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

Answer 1

这不是具体的反应，而是一个在文档<svg>转换为SVG文件，你只需要它的标记序列化到字符串（CF XMLSerializer），将所得字符串附加在一个Blob和上传的Blob您服务器。

但是，如果你想有一个完整的独立的SVG文件，与文档类型和命名空间，这里是如何做到这一点的例子：

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> 
 
    <rect width="50" height="50" x="20" y="10"/> 
 
</svg> 
 
<a>download as file</a>

但是请注意，所有外部资源那对你的节点有影响的东西不会在文件上（也就是说，如果你使用外部样式表做CSS的样式）。在这种情况下，您必须在克隆节点内追加克隆这些外部元素，然后将其附加到SVG文档中。