从嵌入对象中保存svg

时间:2016-05-11 17:23:46

标签: javascript svg

在用户通过网络表单完成编辑后,我一直在尝试将svg节点保存回.svg文件。我不想将其保存为.png或.jpg。我试图使用以下代码来获取.innerHTML并将其保存为.svg,但使用.innerHTML在object标签中找不到任何内容。

<div class="images">
<div id="fixed-column" class="id-column" style="margin-bottom: 15px;  display: inline-block;">
<div id="summary1" class="summary" style="margin-top: 0px; width: 100%;">

<div id="idbox"><object id="statephoto" class="imageplacement" data="/id-photos/al.svg" type="image/svg+xml" name="image-swap" width="100%" min-height="150"></object></div>

</div>
<div class="id-instuctions">Fill out the form to start you custom pet tag design!!</div>
</div>

</div>
<a href="#" id="downloadLink">Download the inner html of #main</a>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js">    </script>
<script>
function downloadInnerHtml(filename, elId, mimeType) {
var elHtml = document.getElementById('statephoto').innerHTML;
var link = document.createElement('a');
mimeType = mimeType || 'text/plain';

link.setAttribute('download', filename);
link.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(elHtml));
link.click(); 
}

var fileName =  'tags.svg'; // You can use the .txt extension if you want

$('#downloadLink').click(function(){`enter code here`
downloadInnerHtml(fileName, 'main','svg/xml');
});

1 个答案:

答案 0 :(得分:0)

我使用

解决了这个问题
// Get the Object by ID
var aaaa = document.getElementById("statephoto");
// Get the SVG document inside the Object tag
var svgDoc = aaaa.contentDocument;
// Get one of the SVG items by ID;
var aaaa = svgDoc.getElementById("svgpetimage").outerHTML;