0
<svg class="paint" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect class="svgobject" x="458" y="165.28750610351562" width="142" height="56" fill="black" stroke="black" id="154" transform="translate(0,0)">
  </rect>
</svg>

For example, I have a web page, which contains a svg child element like above, then how could I build up a function that could extract the svg part and then save locally as .svg? Any help is appreciated

pyy
  • 915
  • 3
  • 9
  • 25
  • Probably a duplicate (filetype is beside the point): https://stackoverflow.com/questions/11336663/how-to-make-a-browser-display-a-save-as-dialog-so-the-user-can-save-the-conten – Jared Farrish Jun 13 '17 at 22:35

1 Answers1

1

This seems to do what you're asking for using HTML5 download:

<a href='{svg content}' download='test.svg'><svg>...</svg></a>

http://jsfiddle.net/GdCcA/1043/

Also, might be worth checking out:

https://github.com/eligrey/FileSaver.js/

xiience
  • 427
  • 3
  • 15
  • Thanks, but my svg content could be changed, how could I use the first method? – pyy Jun 14 '17 at 00:14
  • If you use something like [mustache.js](https://github.com/janl/mustache.js/), you can replace the both of those with {{svgText}} and load them into a template using AJAX. I've used mustachejs to dynamically load an SVG onto the page, but I've never used it for this specific situation. I'll see if I can create a fiddle. – xiience Jun 14 '17 at 00:40
  • Ok, using mustache.js, pretty sure this is what you're looking for: https://jsfiddle.net/63pfdjed/1/ – xiience Jun 14 '17 at 01:03
  • I solve my problem by using the setAttribute() methods. Thanks anyway! – pyy Jun 14 '17 at 01:03