यह वास्तव में d3.js संक्रमणों के तरीके के साथ काफी सरल हो सकता है! चूंकि d3.js सीधे संक्रमण करने के लिए DOM तत्वों को परिवर्तित करता है, इसलिए आप केवल एक दूसरे के प्रत्येक 1/30 वें स्थान पर DOM तत्वों को सहेज सकते हैं। (बजाय सिर्फ उपरोक्त उदाहरण की तरह सांत्वना के लिए उन्हें outputting में)
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
svg { border:1px solid black; }
</style>
</head>
<body>
<svg id="svg" width="480" height="240" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg><br/>
<button id="b1" type="button">Animate</button>
<script type="text/javascript">
var svg = d3.select("svg");
var b1 = d3.select("#b1");
var duration = 1000;
var nTimes = 30;
var x = new XMLSerializer();
var n = 0;
function outputToConsole() {
console.log(x.serializeToString(document.getElementById("svg")));
if(n++ >= 30)
return;
setTimeout(outputToConsole, 33); // 33 milliseconds is close to 1/30th of a second
}
b1.on("click", function() {
svg.select("circle").transition().duration(duration).attr("cx",150);
outputToConsole();
});
</script>
</body>
</html>
अंतिम चरण डिस्क पर अलग-अलग .svg फाइलों में उन outputted svg तत्वों में से प्रत्येक को बचाने के लिए होगा: यहां एक संपूर्ण उदाहरण है। मैंने अभी तक यह कोशिश नहीं की है, लेकिन शायद कोई FileSaver.js जैसे कुछ का उपयोग कर सकता है। फिर वैकल्पिक रूप से .svg फ़ाइलों को ImageMagick जैसे कुछ का उपयोग करके .png फ़ाइलों में परिवर्तित किया जा सकता है।
अपडेट: मैं इस पर आधारित समाधान पर काम कर रहा हूं [उदाहरण] (http://d3export.cancan.cshl.edu/)। अब तक सब ठीक है। मैं अपने html में setInterval() का उपयोग कर form.submit को बुला रहा हूं, और फिर perl स्क्रिप्ट svg नोड से डेटा के साथ एक फ़ाइल डाउनलोड बनाता है। समस्या यह है कि मुझे प्रति सेकंड 30 फ्रेम/फाइलों की आवश्यकता है, और अब तक ऐसा लगता है कि स्क्रिप्ट उस तेजी से काम नहीं कर सकती है। अगर मैं 1 सेकंड एनीमेशन से 30 फाइलें बनाने की कोशिश करता हूं, तो मैं अपने डाउनलोड फ़ोल्डर में केवल 6 या 7 फाइलों के साथ समाप्त होता हूं। – Carrie
क्या आपने अपने कार्यान्वयन में और अधिक प्रगति की है? मैं एक समान समाधान खोजने की कोशिश कर रहा हूं, लेकिन अब तक के सबसे नज़दीकी समाधानों ने मुझे गतिशील रूप से बनाए गए एसवीजी को बचाने के लिए node.js, PhantomJS, jsdom, आदि जैसे कुछ उपयोग किए हैं, लेकिन मुझे नहीं लगता कि वे संक्रमण के लिए खाते हैं। .. (उदाहरण के लिए [यह समाधान] (http://eng.wealthfront.com/2011/12/converting-dynamic-svg-to-png-with.html))। – t2k32316
हाय, इस पर कोई खबर है? मैं इसे भी लागू करना चाहता हूं। शायद एक साथ हम और अधिक कर सकते हैं। – VividD