So speichern Sie SVG-Zeichenfläche im lokalen Dateisystem

Question 1

Gibt es eine Möglichkeit, einem Benutzer, nachdem er mit einem Browser ein Vektordiagramm auf einer Javascript-SVG-Zeichenfläche erstellt hat, das Herunterladen dieser Datei in sein lokales Dateisystem zu ermöglichen?

SVG ist für mich ein völlig neues Feld. Bitte haben Sie etwas Geduld, wenn mein Wortlaut nicht korrekt ist.

Question 2

Möglicherweise können Sie den regulären Browserbefehl "Speichern" verwenden, aber nicht nur die SVG-Zeichenfläche, sondern die gesamte Seite.

Ich glaube, Ihre beste Wette ist es, AJAX zu verwenden und die gesamten SVG-XML-Daten als POST-Daten an ein Serverskript zu senden. Dieses Skript sendet einfach die POST-Daten mit dem Header zurück Content-Disposition: attachment; filename=yourfile.svg.

(Unter PHP können Sie den rohen POST-Inhalt mit abrufen file_get_contents('php://input').)

Question 3

Sie können einen Roundtrip zum Server vermeiden.

Base64 codiert Ihre SVG-XML.

Generieren Sie dann einen Link zu diesen Daten. Der Benutzer kann mit der rechten Maustaste darauf klicken, um es lokal zu speichern.

// This example was created using Protovis & jQuery
// Base64 provided by http://www.webtoolkit.info/javascript-base64.html
// Modern web browsers have a builtin function to this as well 'btoa'
function encode_as_img_and_link(){
 // Add some critical information
 $("svg").attr({ version: '1.1' , xmlns:"http://www.w3.org/2000/svg"});

 var svg = $("#chart-canvas").html();
 var b64 = Base64.encode(svg); // or use btoa if supported

 // Works in recent Webkit(Chrome)
 $("body").append($("<img src='data:image/svg+xml;base64,\n"+b64+"' alt='file.svg'/>"));

 // Works in Firefox 3.6 and Webit and possibly any browser which supports the data-uri
 $("body").append($("<a href-lang='image/svg+xml' href='data:image/svg+xml;base64,\n"+b64+"' title='file.svg'>Download</a>"));
}

Das img-Tag funktioniert in Webkit, der Link funktioniert in Webkit & Firefox und kann in jedem Browser funktionieren, der dies unterstützt data-uri

Question 4

Verwenden von FileSaver.js

saveAs(new Blob([SVG_DATA_HERE], {type:"application/svg+xml"}), "name.svg")

Question 5

Es ist keine Base64-Codierung erforderlich. Sie können einen Link mit dem darin enthaltenen SVG-Rohcode erstellen. Hier ist eine modifizierte Funktion encode_as_img_and_link () aus der Antwort von The_Who:

function img_and_link() {
  $('body').append(
    $('<a>')
      .attr('href-lang', 'image/svg+xml')
      .attr('href', 'data:image/svg+xml;utf8,' +  unescape($('svg')[0].outerHTML))
      .text('Download')
  );
}

Question 6

Mit FileSaver von Eli Gray habe ich es zum Laufen gebracht (Chrom):

bb = new window.WebKitBlobBuilder;
var svg = $('#designpanel').svg('get');
bb.append(svg.toSVG());
var blob = bb.getBlob("application/svg+xml;charset=" + svg.characterSet);
saveAs(blob,"name.svg");

SVG ist von Keith Woods JQuerys SVG.

Html Rocks 1

Html Rocks 2

Question 7

	// save SVG
	$('#SVGsave').click(function(){
		var a      = document.createElement('a');
		a.href     = 'data:image/svg+xml;utf8,' + unescape($('#SVG')[0].outerHTML);
		a.download = 'plot.svg';
		a.target   = '_blank';
		document.body.appendChild(a); a.click(); document.body.removeChild(a);
	});

Erweitern Sie das Snippet

Question 8

Ich habe kürzlich dieses Chrome-Plugin http://nytimes.github.io/svg-crowbar/ gefunden . Es ist ein bisschen fehlerhaft für meine Bedürfnisse, funktioniert aber im Wesentlichen.

Ich hatte zuvor eine ähnliche Lösung wie die akzeptierte Antwort gefunden, die ein serverseitiges Skript beinhaltete, aber es ist ziemlich langwierig und hatte auch das Problem, dass alle Stile im Markup inline sein mussten. Crowbar scheint das für Sie zu erledigen, was sehr schön ist.

Question 9

Ich antworte auf dieses Thema, obwohl es einige Jahre alt ist, weil die jüngste Konvergenz der Webbrowser bei der Unterstützung von SVG und anderen relevanten Verhaltensweisen ein erneutes Interesse an SVG hervorgerufen hat und eine "universelle" Antwort auf die Frage ermöglicht. Im Wesentlichen ist der Ansatz von zneak richtig, aber meiner Meinung nach knapp (dh ich habe eine Weile gebraucht, um ihn für mich selbst zum Laufen zu bringen). Ich denke auch, dass sein Verweis auf AJAX entweder unnötig ist oder nicht das, was ich unter AJAX verstehe (= verwendet eine XMLHttpRequest). Ich werde daher eine detailliertere Antwort mit reinem JavaScript (dh ohne JQuery oder eine andere Bibliothek) geben und Servercode für Java, Perl und PHP bereitstellen.

(1) Lassen Sie den (dynamisch generierten) SVG-Inhalt in Ihrer HTML-Seite in einem div mit einer eindeutigen ID einschließen, z

<div id="svg"><svg...>SVG content</svg></div>

(2) Fügen Sie eine Schaltfläche zum Aufrufen der JavaScript-Funktion hinzu, z

<button onclick="sendSVG();">Save as SVG File</button>

(3) Fügen Sie die angegebene JavaScript-Funktion in Ihr Schaltflächen-Markup ein:

function sendSVG() 
{
   var svgText = document.getElementById('svg').innerHTML;

   var form = document.createElement("form");
   form.setAttribute("method", "post");
   form.setAttribute("action", "http://path-to-your-server-app");
   form.setAttribute("accept-charset", "UTF-8");

   var hiddenSVGField = document.createElement("input");    
   hiddenSVGField.setAttribute("type", "hidden");
   hiddenSVGField.setAttribute("name", "svgText");
   hiddenSVGField.setAttribute("value", svgText);

   form.appendChild(hiddenSVGField);
   document.body.appendChild(form);
   form.submit();
}

(4) Schreiben Sie eine Server-App, um Ihre SVGtext-Post-Anfrage zu akzeptieren, und geben Sie sie als image / svg + xml zurück, indem Sie Content-Disposition verwenden, um einen Anhang anzugeben. Arbeitscode in drei Sprachen wird vorgestellt, obwohl ich kein Perl-Programmierer bin und PHP noch nie im Zorn benutzt habe.

Java Servlet

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
   String svgText = (String) request.getParameter("svgText");
   response.setContentType("image/svg+xml");
   response.addHeader("Content-Disposition", "attachment; filename=\"image.svg\"");
   PrintWriter out = response.getWriter();
   out.println(svgText);
}

Perl CGI

use CGI qw(:standard);
my $svgText = param('svgText');
print header(-type => "image/svg+xml",
    -content_disposition => "attachment; filename=image.svg");      
print $svgText;

PHP

<?php
   $svgText = $_POST['svgText'];
   header('Content-type: image/svg+xml');
   header('Content-Disposition: attachment; filename="image.svg"'); 
   print "$svgText";
?>

Ich habe hier einen fest codierten Namen für das Bild verwendet (image.svg), aber tatsächlich einen Diskriptor des dynamischen Inhalts aufgenommen, den ich von der Seite generiere (wieder mit einem div und einer ID und document.getElementById('graphName').textContent).

Dies wurde auf Mac Safari 9, Firefox 42, Chrome 47, Opera 34 und Windows 7 / IE 11 sowie Windows 10 / Edge getestet. In jedem Fall wird die SVG-Datei heruntergeladen oder einer wird aufgefordert, sie herunterzuladen. Die resultierenden Dateien werden in Adobe Illustrator oder einer anderen Anwendung geöffnet, die Sie zum Öffnen von SVG-Dateien festgelegt haben.

Ein reales Beispiel hierfür (wenn Sie die akademische Forschung als real betrachten) finden Sie unter http://flyatlas.gla.ac.uk/MidgutAtlas/index.html im Abschnitt Gene.

Question 10

Ja ist das möglich Verwenden Sie jquery.svg http://keith-wood.name/svgRef.html und veröffentlichen Sie die svg xml-Daten mit der Funktion svg.toSVG () (beim Senden in ein verstecktes Feld schreiben). Lassen Sie das PHP mit imagemagick speichern und in ein Raster konvertieren (konvertieren Sie image.svg image.png), erzwingen Sie dann das Herunterladen der Datei mithilfe des Headers ("Inhaltstyp: Anwendung / Oktett-Stream") und lesen Sie das Bild erneut.

Question 11

Am kompatibelsten wäre ein Roundtrip zum Server. Sie können in einigen Browsern auch einen Daten-URI verwenden .

Question 12

Sie können mit Javascript nichts im lokalen Dateisystem speichern. Sie sollten lediglich den Inhalt von canvasan den Server senden und den Benutzer dazu bringen, diesen herunterzuladen und zu speichern.

Question 13

Um meine eigene Frage zu beantworten:

Eine andere Möglichkeit, wenn auch nicht die schönste, besteht darin, den serialisierten Inhalt auf der Webseite anzuzeigen und ihn vom Benutzer auswählen, kopieren und einfügen zu lassen. Dies nach der Untersuchung der Lösung von eli grey.

Question 14

Ich habe vielleicht einen besseren Weg gefunden, um den Benutzer nicht zu zwingen, mit der rechten Maustaste auf "Bild speichern unter" zu klicken. Zeichne einfach live den Canvas Base64-Code in die HREF des Links und ändere ihn so, dass der Download automatisch startet. Ich weiß nicht, ob sein universeller Browser kompatibel ist, aber es sollte mit den Haupt- / neuen Browsern funktionieren.

var canvas = document.getElementById('your-canvas');
    if (canvas.getContext) {
        var C = canvas.getContext('2d');
    }

$('#your-canvas').mousedown(function(event) {
    // feel free to choose your event ;) 

    // just for example
    // var OFFSET = $(this).offset();
    // var x = event.pageX - OFFSET.left;
    // var y = event.pageY - OFFSET.top;

    // standard data to url
    var imgdata = canvas.toDataURL('image/png');
    // modify the dataUrl so the browser starts downloading it instead of just showing it
    var newdata = imgdata.replace(/^data:image\/png/,'data:application/octet-stream');
    // give the link the values it needs
       $('a.linkwithnewattr').attr('download','your_pic_name.png').attr('href',newdata);

});

Fühlen Sie sich frei, das a um alles zu wickeln, was Sie wollen, hoffen Sie, dass das ein bisschen hilft

Question 15

$(document).ready(function(){	
 $("#btnDownload").click(function(){
	var $container = $('#svg-container'),
     // Canvg requires trimmed content
    content = $container.html().trim(),
    canvas = document.getElementById('svg-canvas');
	
	// Draw svg on canvas
    canvg(canvas, content);
	$container.hide();
    // Change img be SVG representation
    var theImage = canvas.toDataURL('image/jpeg');
	
	var a = document.createElement('a');
	a.href = theImage; // xhr.response es un blob file
	a.target = '_blank';
	a.download = 'prueba'; // nombre del archivo.
	a.style.display = 'none';
	document.body.appendChild(a);
	a.click();
	delete a;
});//fin function
});// fin

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script> 
<input id="svgData" name="svgData" type="hidden"/>
<input id="btnDownload" type="button" value="Descargar"/>
<div id='svg-container'>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="font-family:'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="600" height="400"><desc>Created with Highcharts 4.0.4</desc><defs><clipPath id="highcharts-5"><rect x="-75" y="-75" width="750" height="550"></rect></clipPath></defs><rect x="0" y="0" width="600" height="400" strokeWidth="0" fill="#FFFFFF" class=" highcharts-background"></rect><g  style="stroke:rgba(255,255,255,0);"><path fill="rgb(255,255,255)" fill-opacity="0" d="M 59 79 L 460 61 L 456 287 L 65 330 Z"  stroke-linejoin="round"></path><path fill="rgb(255,255,255)" fill-opacity="0" d="M 65 330 L 456 287 L 456 286 L 65 330 Z"  stroke-linejoin="round"></path><path fill="rgb(230,230,230)" fill-opacity="0" d="M 0 0"  stroke-linejoin="round"></path></g><g  style="stroke:rgba(255,255,255,0);"><path fill="rgb(255,255,255)" fill-opacity="0" d="M 495 66 L 496 66 L 490 300 L 490 301 Z"  stroke-linejoin="round"></path><path fill="rgb(230,230,230)" fill-opacity="0" d="M 495 66 L 460 61 L 455 287 L 490 301 Z"  stroke-linejoin="round"></path><path fill="rgb(255,255,255)" fill-opacity="0" d="M 495 66 L 460 61 L 460 61 L 496 66 Z"  stroke-linejoin="round"></path></g><g  style="stroke:rgba(255,255,255,0);"><path fill="rgb(255,255,255)" fill-opacity="0" d="M 88 345 L 490 300 L 490 300 L 88 346 Z"  stroke-linejoin="round"></path><path fill="rgb(255,255,255)" fill-opacity="0" d="M 88 346 L 490 300 L 457 287 L 65 330 Z"  stroke-linejoin="round"></path><path fill="rgb(230,230,230)" fill-opacity="0" d="M 88 345 L 65 329 L 65 330 L 88 346 Z"  stroke-linejoin="round"></path></g><g class="highcharts-grid" ><path fill="none" d="M 146 75 L 146 75 L 150 320 L 175 336" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 189 73 L 189 73 L 191 316 L 217 331" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 230 71 L 230 71 L 232 311 L 259 326" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 271 69 L 271 69 L 271 307 L 300 322" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 310 67 L 310 67 L 310 302 L 339 317" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 349 66 L 349 66 L 348 298 L 378 313" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 387 64 L 387 64 L 385 294 L 416 308" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 424 62 L 424 62 L 421 290 L 454 304" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 461 61 L 461 61 L 457 286 L 491 300" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 103 77 L 103 77 L 108 325 L 131 341" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 59 79 L 59 79 L 65 329 L 87 345" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path></g><g class="highcharts-grid" ><path fill="none" d="M 59 78 L 59 78 L 461 60 L 496 66" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 61 144 L 61 144 L 460 119 L 494 127" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 62 206 L 62 206 L 459 175 L 493 185" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 64 269 L 64 269 L 458 232 L 492 243" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 65 330 L 65 330 L 457 286 L 490 300" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path></g><g class="highcharts-axis" ><path fill="none" d="M 75 325.5 L 525 325.5" stroke="#C0D0E0" stroke-width="1"  visibility="hidden"></path></g><g class="highcharts-axis" ><text x="556.96875"  text-anchor="middle" transform="translate(0,0) rotate(90 556.96875 200)" class=" highcharts-yaxis-title" style="color:#707070;fill:#707070;" visibility="visible" y="200">Values</text></g><g class="highcharts-series-group" ><g class="highcharts-series" visibility="visible"  transform="translate(75,75) scale(1 1)" clip-path="url(#highcharts-5)"><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 390 141 L 408 139 L 406 226 L 388 228 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 390 141 L 378 137 L 376 223 L 388 228 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 390 141 L 378 137 L 395 136 L 408 139 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 353 56 L 372 54 L 369 230 L 351 232 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 353 56 L 342 53 L 339 227 L 351 232 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 353 56 L 342 53 L 360 52 L 372 54 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 314 118 L 333 117 L 332 235 L 313 237 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 314 118 L 303 114 L 302 231 L 313 237 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 314 118 L 303 114 L 322 113 L 333 117 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 275 212 L 294 210 L 293 239 L 274 241 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 275 212 L 264 207 L 283 205 L 294 210 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 275 212 L 264 207 L 264 236 L 274 241 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 235 94 L 255 93 L 254 243 L 235 246 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 235 94 L 224 90 L 224 240 L 235 246 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 235 94 L 224 90 L 244 89 L 255 93 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 194 250 L 214 248 L 214 248 L 194 250 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 194 250 L 184 245 L 204 243 L 214 248 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 194 250 L 184 245 L 184 245 L 194 250 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 152 131 L 173 130 L 173 253 L 153 255 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 152 131 L 142 127 L 143 249 L 153 255 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 152 131 L 142 127 L 163 126 L 173 130 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 66 170 L 88 168 L 89 262 L 68 264 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 66 170 L 57 165 L 59 259 L 68 264 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 66 170 L 57 165 L 79 163 L 88 168 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 23 206 L 44 204 L 45 267 L 24 269 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 23 206 L 14 201 L 15 264 L 24 269 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 23 206 L 14 201 L 36 199 L 44 204 Z"  stroke-linejoin="round"></path></g></g><g class="highcharts-markers" visibility="visible"  transform="translate(75,75) scale(1 1)" clip-path="none"></g></g><text x="300" text-anchor="middle" class="highcharts-title"  style="color:#333333;font-size:18px;fill:#333333;width:536px;" y="25"><tspan>3D chart with null values</tspan></text><text x="300" text-anchor="middle" class="highcharts-subtitle"  style="color:#555555;fill:#555555;width:536px;" y="53"><tspan>Notice the difference between a 0 value and a null point</tspan></text><g class="highcharts-legend"  transform="translate(270,364)"><g ><g><g class="highcharts-legend-item"  transform="translate(8,3)"><text x="21" style="color:#333333;font-size:12px;font-weight:bold;cursor:pointer;fill:#333333;" text-anchor="start"  y="15">Sales</text><rect x="0" y="4" width="16" height="12"  fill="#7cb5ec"></rect></g></g></g></g><g class="highcharts-axis-labels highcharts-xaxis-labels" ><text x="110" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="363" z="-59" opacity="1">Jan</text><text x="154" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="358" z="-40" opacity="1">Feb</text><text x="197" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="353" z="-22" opacity="1">Mar</text><text x="239" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="348" z="-3" opacity="1">Apr</text><text x="280" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="343" z="16" opacity="1">May</text><text x="320" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="338" z="35" opacity="1">Jun</text><text x="359" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="334" z="53" opacity="1">Jul</text><text x="398" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="329" z="72" opacity="1">Aug</text><text x="435" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="324" z="91" opacity="1">Sep</text><text x="472" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="320" z="109" opacity="1">Oct</text></g><g class="highcharts-axis-labels highcharts-yaxis-labels" ><text x="502" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="301" z="122" opacity="1">0</text><text x="504" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="244" z="111" opacity="1">2</text><text x="505" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="187" z="100" opacity="1">4</text><text x="506" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="128" z="90" opacity="1">6</text><text x="508" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="69" z="79" opacity="1">8</text></g><g class="highcharts-tooltip"  style="cursor:default;padding:0;white-space:nowrap;" transform="translate(0,-9999)"><path fill="none" d="M 3 0 L 13 0 C 16 0 16 0 16 3 L 16 13 C 16 16 16 16 13 16 L 3 16 C 0 16 0 16 0 13 L 0 3 C 0 0 0 0 3 0"  stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></path><path fill="none" d="M 3 0 L 13 0 C 16 0 16 0 16 3 L 16 13 C 16 16 16 16 13 16 L 3 16 C 0 16 0 16 0 13 L 0 3 C 0 0 0 0 3 0"  stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></path><path fill="none" d="M 3 0 L 13 0 C 16 0 16 0 16 3 L 16 13 C 16 16 16 16 13 16 L 3 16 C 0 16 0 16 0 13 L 0 3 C 0 0 0 0 3 0"  stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></path><path fill="rgb(249, 249, 249)" fill-opacity=" .85" d="M 3 0 L 13 0 C 16 0 16 0 16 3 L 16 13 C 16 16 16 16 13 16 L 3 16 C 0 16 0 16 0 13 L 0 3 C 0 0 0 0 3 0"></path><text x="8"  style="font-size:12px;color:#333333;fill:#333333;" y="21"></text></g><text x="590" text-anchor="end"  style="cursor:pointer;color:#909090;font-size:9px;fill:#909090;" y="395">Highcharts.com</text></svg>

</div>
<section>
	<canvas id="svg-canvas"></canvas>
</section>

Erweitern Sie das Snippet

Question 16

Ich habe aus den Vorschlägen ein sauberes / brauchbares Lesezeichen gemacht.

Neben jeder Inline <svg>auf der Seite wird ein eindeutiger Link eingefügt.

https://codepen.io/corysimmons/pen/vybzqV

Hoffe es hilft jemandem.

Question 17

Es ist überhaupt keine Programmierung erforderlich. Es gibt Online-Apps, die bereits dafür entwickelt wurden und definierbare Parameter wie Abmessungen, Auflösung, Ausgabeformat usw. enthalten.

Dies ist eine der besseren Online-Bildkonvertierungs-Apps, die ich für svg-> jpeg gefunden habe. http://image.online-convert.com/convert-to-jpg

Answer 1

78

Gibt es eine Möglichkeit, einem Benutzer, nachdem er mit einem Browser ein Vektordiagramm auf einer Javascript-SVG-Zeichenfläche erstellt hat, das Herunterladen dieser Datei in sein lokales Dateisystem zu ermöglichen?

SVG ist für mich ein völlig neues Feld. Bitte haben Sie etwas Geduld, wenn mein Wortlaut nicht korrekt ist.

javascript svg save filesystems local Dr. Jerry
quelle

Ich habe eine ähnliche Frage hier ausführlicher beantwortet: stackoverflow.com/questions/8379923/…

Tony R

Ich habe endlich eine funktionierende Implementierung: iscriptdesign.com . Wählen Sie SVG-Export. Verifiziert für die neuesten Firefox & Chrome

Dr.

Answer 2

Ich habe eine ähnliche Frage hier ausführlicher beantwortet: stackoverflow.com/questions/8379923/…

Tony R

Answer 3

Ich habe endlich eine funktionierende Implementierung: iscriptdesign.com . Wählen Sie SVG-Export. Verifiziert für die neuesten Firefox & Chrome

Dr.

Answer 4

Möglicherweise können Sie den regulären Browserbefehl "Speichern" verwenden, aber nicht nur die SVG-Zeichenfläche, sondern die gesamte Seite.

Ich glaube, Ihre beste Wette ist es, AJAX zu verwenden und die gesamten SVG-XML-Daten als POST-Daten an ein Serverskript zu senden. Dieses Skript sendet einfach die POST-Daten mit dem Header zurück Content-Disposition: attachment; filename=yourfile.svg.

(Unter PHP können Sie den rohen POST-Inhalt mit abrufen file_get_contents('php://input').)

Answer 5

Wie sollen wir in diesem Fall mit der Antwort umgehen?

Srikrishnan Suresh

Answer 6

64

Sie können einen Roundtrip zum Server vermeiden.

Base64 codiert Ihre SVG-XML.

Generieren Sie dann einen Link zu diesen Daten. Der Benutzer kann mit der rechten Maustaste darauf klicken, um es lokal zu speichern.

// This example was created using Protovis & jQuery
// Base64 provided by http://www.webtoolkit.info/javascript-base64.html
// Modern web browsers have a builtin function to this as well 'btoa'
function encode_as_img_and_link(){
 // Add some critical information
 $("svg").attr({ version: '1.1' , xmlns:"http://www.w3.org/2000/svg"});

 var svg = $("#chart-canvas").html();
 var b64 = Base64.encode(svg); // or use btoa if supported

 // Works in recent Webkit(Chrome)
 $("body").append($("<img src='data:image/svg+xml;base64,\n"+b64+"' alt='file.svg'/>"));

 // Works in Firefox 3.6 and Webit and possibly any browser which supports the data-uri
 $("body").append($("<a href-lang='image/svg+xml' href='data:image/svg+xml;base64,\n"+b64+"' title='file.svg'>Download</a>"));
}

Das img-Tag funktioniert in Webkit, der Link funktioniert in Webkit & Firefox und kann in jedem Browser funktionieren, der dies unterstützt data-uri

Die WHO
quelle

2

Woher kommt Base64das?

Kaiser

6

Dieses Beispiel verwendet die Bibliothek von webtoolkit.info/javascript-base64.html

The Who

Dies ist die absolut sauberste Lösung und funktioniert fast : Chrome zeigt das Bild von Data-Uri korrekt an, aber Sie können es nicht speichern! Firefox ist schlimmer, da es die Daten irgendwie verstümmelt. Seufzer

Cuadue

2

Mit HTML5 können Sie das downloadAttribut auch zu Ihrem Link hinzufügen , was es für den Benutzer etwas einfacher macht. Siehe hier für weitere Informationen

Luke H

5

Wenn der Text Unicode-Zeichen enthält, verwenden Sie btoa(unescape(encodeURIComponent(svg)))- keine Bibliotheken erforderlich.

Simon A. Eugster

Answer 7

2

Woher kommt Base64das?

Kaiser

Answer 8

6

Dieses Beispiel verwendet die Bibliothek von webtoolkit.info/javascript-base64.html

The Who

Answer 9

Dies ist die absolut sauberste Lösung und funktioniert fast : Chrome zeigt das Bild von Data-Uri korrekt an, aber Sie können es nicht speichern! Firefox ist schlimmer, da es die Daten irgendwie verstümmelt. Seufzer

Cuadue

Answer 10

2

Mit HTML5 können Sie das downloadAttribut auch zu Ihrem Link hinzufügen , was es für den Benutzer etwas einfacher macht. Siehe hier für weitere Informationen

Luke H

Answer 11

5

Wenn der Text Unicode-Zeichen enthält, verwenden Sie btoa(unescape(encodeURIComponent(svg)))- keine Bibliotheken erforderlich.

Simon A. Eugster

Answer 12

19

Verwenden von FileSaver.js

saveAs(new Blob([SVG_DATA_HERE], {type:"application/svg+xml"}), "name.svg")

Eli Gray
quelle

1

Wie beantwortet dies die Frage? Es speichert die SVG nicht im lokalen Dateisystem, oder?

Scott Evernden

1

Scott: Dadurch wird die SVG-Datei auf einer eigenen Seite geöffnet, auf der der Benutzer sie selbst in seinem Dateisystem speichern kann.

Eli Gray

Wenn ich es versuche, erhalte ich die folgende Fehlermeldung: "Diese Seite enthält die folgenden Fehler: Fehler in Zeile 1 in Spalte 1: Dokument ist leer" - aber der Fehler ist möglicherweise auf meiner Seite. Ich weiß, dass ich die richtigen Daten einsetze, daher weiß ich nicht, um welchen Fehler es sich handelt.

Kaiser

Wie kann ich das extrahieren SVG_DATA? document.getElementsByTagName("svg")<something to get the data>

Yckart

1

@yckart: document.getElementsByTagName ("svg") [i] .parentNode.innerHTML, wobei i der Schlüssel des svg ist, den Sie in die von document.get ... zurückgegebene HTMLCollectionr exportieren möchten, wenn Sie nur ein svn-Tag haben auf der Seite ist dann i = 0.

Radu Maris

Answer 13

1

Wie beantwortet dies die Frage? Es speichert die SVG nicht im lokalen Dateisystem, oder?

Scott Evernden

Answer 14

1

Scott: Dadurch wird die SVG-Datei auf einer eigenen Seite geöffnet, auf der der Benutzer sie selbst in seinem Dateisystem speichern kann.

Eli Gray

Answer 15

Wenn ich es versuche, erhalte ich die folgende Fehlermeldung: "Diese Seite enthält die folgenden Fehler: Fehler in Zeile 1 in Spalte 1: Dokument ist leer" - aber der Fehler ist möglicherweise auf meiner Seite. Ich weiß, dass ich die richtigen Daten einsetze, daher weiß ich nicht, um welchen Fehler es sich handelt.

Kaiser

Answer 16

Wie kann ich das extrahieren SVG_DATA? document.getElementsByTagName("svg")<something to get the data>

Yckart

Answer 17

1

@yckart: document.getElementsByTagName ("svg") [i] .parentNode.innerHTML, wobei i der Schlüssel des svg ist, den Sie in die von document.get ... zurückgegebene HTMLCollectionr exportieren möchten, wenn Sie nur ein svn-Tag haben auf der Seite ist dann i = 0.

Radu Maris

Answer 18

18

Es ist keine Base64-Codierung erforderlich. Sie können einen Link mit dem darin enthaltenen SVG-Rohcode erstellen. Hier ist eine modifizierte Funktion encode_as_img_and_link () aus der Antwort von The_Who:

function img_and_link() {
  $('body').append(
    $('<a>')
      .attr('href-lang', 'image/svg+xml')
      .attr('href', 'data:image/svg+xml;utf8,' +  unescape($('svg')[0].outerHTML))
      .text('Download')
  );
}

mac13k
quelle

1

Diese Antwort sollte positiv bewertet werden. Der zweite Parameter von .attr('href', ...)ist effektiv der Rohcode <svg>...</svg>. Funktioniert unter Chrome und Safari, obwohl ich es nicht für Edge zum Laufen gebracht habe. IE scheint ein No-Go auf ganzer Linie zu sein.

cbmtrx

Für mich ist dies kaputt gegangen, als die Quell-SVG eine XML-URL hat, die mit '#' endet.

Eff

Answer 19

1

Diese Antwort sollte positiv bewertet werden. Der zweite Parameter von .attr('href', ...)ist effektiv der Rohcode <svg>...</svg>. Funktioniert unter Chrome und Safari, obwohl ich es nicht für Edge zum Laufen gebracht habe. IE scheint ein No-Go auf ganzer Linie zu sein.

cbmtrx

Answer 20

Für mich ist dies kaputt gegangen, als die Quell-SVG eine XML-URL hat, die mit '#' endet.

Eff

Answer 21

Mit FileSaver von Eli Gray habe ich es zum Laufen gebracht (Chrom):

bb = new window.WebKitBlobBuilder;
var svg = $('#designpanel').svg('get');
bb.append(svg.toSVG());
var blob = bb.getBlob("application/svg+xml;charset=" + svg.characterSet);
saveAs(blob,"name.svg");

SVG ist von Keith Woods JQuerys SVG.

Html Rocks 1

Html Rocks 2

Answer 22

7

	// save SVG
	$('#SVGsave').click(function(){
		var a      = document.createElement('a');
		a.href     = 'data:image/svg+xml;utf8,' + unescape($('#SVG')[0].outerHTML);
		a.download = 'plot.svg';
		a.target   = '_blank';
		document.body.appendChild(a); a.click(); document.body.removeChild(a);
	});

Erweitern Sie das Snippet

user2053898
quelle

2

Du hast den ersten Tag gerettet! Ich würde dir ein Stackoverflow-Gold geben, wenn es existieren würde!

Antonio Ragagnin

Answer 23

2

Du hast den ersten Tag gerettet! Ich würde dir ein Stackoverflow-Gold geben, wenn es existieren würde!

Antonio Ragagnin

Answer 24

Ich habe kürzlich dieses Chrome-Plugin http://nytimes.github.io/svg-crowbar/ gefunden . Es ist ein bisschen fehlerhaft für meine Bedürfnisse, funktioniert aber im Wesentlichen.

Ich hatte zuvor eine ähnliche Lösung wie die akzeptierte Antwort gefunden, die ein serverseitiges Skript beinhaltete, aber es ist ziemlich langwierig und hatte auch das Problem, dass alle Stile im Markup inline sein mussten. Crowbar scheint das für Sie zu erledigen, was sehr schön ist.

Answer 25

Ich antworte auf dieses Thema, obwohl es einige Jahre alt ist, weil die jüngste Konvergenz der Webbrowser bei der Unterstützung von SVG und anderen relevanten Verhaltensweisen ein erneutes Interesse an SVG hervorgerufen hat und eine "universelle" Antwort auf die Frage ermöglicht. Im Wesentlichen ist der Ansatz von zneak richtig, aber meiner Meinung nach knapp (dh ich habe eine Weile gebraucht, um ihn für mich selbst zum Laufen zu bringen). Ich denke auch, dass sein Verweis auf AJAX entweder unnötig ist oder nicht das, was ich unter AJAX verstehe (= verwendet eine XMLHttpRequest). Ich werde daher eine detailliertere Antwort mit reinem JavaScript (dh ohne JQuery oder eine andere Bibliothek) geben und Servercode für Java, Perl und PHP bereitstellen.

(1) Lassen Sie den (dynamisch generierten) SVG-Inhalt in Ihrer HTML-Seite in einem div mit einer eindeutigen ID einschließen, z

<div id="svg"><svg...>SVG content</svg></div>

(2) Fügen Sie eine Schaltfläche zum Aufrufen der JavaScript-Funktion hinzu, z

<button onclick="sendSVG();">Save as SVG File</button>

(3) Fügen Sie die angegebene JavaScript-Funktion in Ihr Schaltflächen-Markup ein:

function sendSVG() 
{
   var svgText = document.getElementById('svg').innerHTML;

   var form = document.createElement("form");
   form.setAttribute("method", "post");
   form.setAttribute("action", "http://path-to-your-server-app");
   form.setAttribute("accept-charset", "UTF-8");

   var hiddenSVGField = document.createElement("input");    
   hiddenSVGField.setAttribute("type", "hidden");
   hiddenSVGField.setAttribute("name", "svgText");
   hiddenSVGField.setAttribute("value", svgText);

   form.appendChild(hiddenSVGField);
   document.body.appendChild(form);
   form.submit();
}

(4) Schreiben Sie eine Server-App, um Ihre SVGtext-Post-Anfrage zu akzeptieren, und geben Sie sie als image / svg + xml zurück, indem Sie Content-Disposition verwenden, um einen Anhang anzugeben. Arbeitscode in drei Sprachen wird vorgestellt, obwohl ich kein Perl-Programmierer bin und PHP noch nie im Zorn benutzt habe.

Java Servlet

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
   String svgText = (String) request.getParameter("svgText");
   response.setContentType("image/svg+xml");
   response.addHeader("Content-Disposition", "attachment; filename=\"image.svg\"");
   PrintWriter out = response.getWriter();
   out.println(svgText);
}

Perl CGI

use CGI qw(:standard);
my $svgText = param('svgText');
print header(-type => "image/svg+xml",
    -content_disposition => "attachment; filename=image.svg");      
print $svgText;

PHP

<?php
   $svgText = $_POST['svgText'];
   header('Content-type: image/svg+xml');
   header('Content-Disposition: attachment; filename="image.svg"'); 
   print "$svgText";
?>

Ich habe hier einen fest codierten Namen für das Bild verwendet (image.svg), aber tatsächlich einen Diskriptor des dynamischen Inhalts aufgenommen, den ich von der Seite generiere (wieder mit einem div und einer ID und document.getElementById('graphName').textContent).

Dies wurde auf Mac Safari 9, Firefox 42, Chrome 47, Opera 34 und Windows 7 / IE 11 sowie Windows 10 / Edge getestet. In jedem Fall wird die SVG-Datei heruntergeladen oder einer wird aufgefordert, sie herunterzuladen. Die resultierenden Dateien werden in Adobe Illustrator oder einer anderen Anwendung geöffnet, die Sie zum Öffnen von SVG-Dateien festgelegt haben.

Ein reales Beispiel hierfür (wenn Sie die akademische Forschung als real betrachten) finden Sie unter http://flyatlas.gla.ac.uk/MidgutAtlas/index.html im Abschnitt Gene.

Answer 26

Ja ist das möglich Verwenden Sie jquery.svg http://keith-wood.name/svgRef.html und veröffentlichen Sie die svg xml-Daten mit der Funktion svg.toSVG () (beim Senden in ein verstecktes Feld schreiben). Lassen Sie das PHP mit imagemagick speichern und in ein Raster konvertieren (konvertieren Sie image.svg image.png), erzwingen Sie dann das Herunterladen der Datei mithilfe des Headers ("Inhaltstyp: Anwendung / Oktett-Stream") und lesen Sie das Bild erneut.

Answer 27

1

Am kompatibelsten wäre ein Roundtrip zum Server. Sie können in einigen Browsern auch einen Daten-URI verwenden .

Dunkler Falke
quelle

Alle Browser, die SVG unterstützen, unterstützen auch Daten-URLs, afaik.

Erik Dahlström

Answer 28

Alle Browser, die SVG unterstützen, unterstützen auch Daten-URLs, afaik.

Erik Dahlström

Answer 29

Sie können mit Javascript nichts im lokalen Dateisystem speichern. Sie sollten lediglich den Inhalt von canvasan den Server senden und den Benutzer dazu bringen, diesen herunterzuladen und zu speichern.

Answer 30

Um meine eigene Frage zu beantworten:

Eine andere Möglichkeit, wenn auch nicht die schönste, besteht darin, den serialisierten Inhalt auf der Webseite anzuzeigen und ihn vom Benutzer auswählen, kopieren und einfügen zu lassen. Dies nach der Untersuchung der Lösung von eli grey.

Answer 31

Ich habe vielleicht einen besseren Weg gefunden, um den Benutzer nicht zu zwingen, mit der rechten Maustaste auf "Bild speichern unter" zu klicken. Zeichne einfach live den Canvas Base64-Code in die HREF des Links und ändere ihn so, dass der Download automatisch startet. Ich weiß nicht, ob sein universeller Browser kompatibel ist, aber es sollte mit den Haupt- / neuen Browsern funktionieren.

var canvas = document.getElementById('your-canvas');
    if (canvas.getContext) {
        var C = canvas.getContext('2d');
    }

$('#your-canvas').mousedown(function(event) {
    // feel free to choose your event ;) 

    // just for example
    // var OFFSET = $(this).offset();
    // var x = event.pageX - OFFSET.left;
    // var y = event.pageY - OFFSET.top;

    // standard data to url
    var imgdata = canvas.toDataURL('image/png');
    // modify the dataUrl so the browser starts downloading it instead of just showing it
    var newdata = imgdata.replace(/^data:image\/png/,'data:application/octet-stream');
    // give the link the values it needs
       $('a.linkwithnewattr').attr('download','your_pic_name.png').attr('href',newdata);

});

Fühlen Sie sich frei, das a um alles zu wickeln, was Sie wollen, hoffen Sie, dass das ein bisschen hilft

Answer 32

$(document).ready(function(){	
 $("#btnDownload").click(function(){
	var $container = $('#svg-container'),
     // Canvg requires trimmed content
    content = $container.html().trim(),
    canvas = document.getElementById('svg-canvas');
	
	// Draw svg on canvas
    canvg(canvas, content);
	$container.hide();
    // Change img be SVG representation
    var theImage = canvas.toDataURL('image/jpeg');
	
	var a = document.createElement('a');
	a.href = theImage; // xhr.response es un blob file
	a.target = '_blank';
	a.download = 'prueba'; // nombre del archivo.
	a.style.display = 'none';
	document.body.appendChild(a);
	a.click();
	delete a;
});//fin function
});// fin

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script> 
<input id="svgData" name="svgData" type="hidden"/>
<input id="btnDownload" type="button" value="Descargar"/>
<div id='svg-container'>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="font-family:'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="600" height="400"><desc>Created with Highcharts 4.0.4</desc><defs><clipPath id="highcharts-5"><rect x="-75" y="-75" width="750" height="550"></rect></clipPath></defs><rect x="0" y="0" width="600" height="400" strokeWidth="0" fill="#FFFFFF" class=" highcharts-background"></rect><g  style="stroke:rgba(255,255,255,0);"><path fill="rgb(255,255,255)" fill-opacity="0" d="M 59 79 L 460 61 L 456 287 L 65 330 Z"  stroke-linejoin="round"></path><path fill="rgb(255,255,255)" fill-opacity="0" d="M 65 330 L 456 287 L 456 286 L 65 330 Z"  stroke-linejoin="round"></path><path fill="rgb(230,230,230)" fill-opacity="0" d="M 0 0"  stroke-linejoin="round"></path></g><g  style="stroke:rgba(255,255,255,0);"><path fill="rgb(255,255,255)" fill-opacity="0" d="M 495 66 L 496 66 L 490 300 L 490 301 Z"  stroke-linejoin="round"></path><path fill="rgb(230,230,230)" fill-opacity="0" d="M 495 66 L 460 61 L 455 287 L 490 301 Z"  stroke-linejoin="round"></path><path fill="rgb(255,255,255)" fill-opacity="0" d="M 495 66 L 460 61 L 460 61 L 496 66 Z"  stroke-linejoin="round"></path></g><g  style="stroke:rgba(255,255,255,0);"><path fill="rgb(255,255,255)" fill-opacity="0" d="M 88 345 L 490 300 L 490 300 L 88 346 Z"  stroke-linejoin="round"></path><path fill="rgb(255,255,255)" fill-opacity="0" d="M 88 346 L 490 300 L 457 287 L 65 330 Z"  stroke-linejoin="round"></path><path fill="rgb(230,230,230)" fill-opacity="0" d="M 88 345 L 65 329 L 65 330 L 88 346 Z"  stroke-linejoin="round"></path></g><g class="highcharts-grid" ><path fill="none" d="M 146 75 L 146 75 L 150 320 L 175 336" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 189 73 L 189 73 L 191 316 L 217 331" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 230 71 L 230 71 L 232 311 L 259 326" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 271 69 L 271 69 L 271 307 L 300 322" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 310 67 L 310 67 L 310 302 L 339 317" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 349 66 L 349 66 L 348 298 L 378 313" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 387 64 L 387 64 L 385 294 L 416 308" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 424 62 L 424 62 L 421 290 L 454 304" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 461 61 L 461 61 L 457 286 L 491 300" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 103 77 L 103 77 L 108 325 L 131 341" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 59 79 L 59 79 L 65 329 L 87 345" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path></g><g class="highcharts-grid" ><path fill="none" d="M 59 78 L 59 78 L 461 60 L 496 66" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 61 144 L 61 144 L 460 119 L 494 127" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 62 206 L 62 206 L 459 175 L 493 185" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 64 269 L 64 269 L 458 232 L 492 243" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 65 330 L 65 330 L 457 286 L 490 300" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path></g><g class="highcharts-axis" ><path fill="none" d="M 75 325.5 L 525 325.5" stroke="#C0D0E0" stroke-width="1"  visibility="hidden"></path></g><g class="highcharts-axis" ><text x="556.96875"  text-anchor="middle" transform="translate(0,0) rotate(90 556.96875 200)" class=" highcharts-yaxis-title" style="color:#707070;fill:#707070;" visibility="visible" y="200">Values</text></g><g class="highcharts-series-group" ><g class="highcharts-series" visibility="visible"  transform="translate(75,75) scale(1 1)" clip-path="url(#highcharts-5)"><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 390 141 L 408 139 L 406 226 L 388 228 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 390 141 L 378 137 L 376 223 L 388 228 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 390 141 L 378 137 L 395 136 L 408 139 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 353 56 L 372 54 L 369 230 L 351 232 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 353 56 L 342 53 L 339 227 L 351 232 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 353 56 L 342 53 L 360 52 L 372 54 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 314 118 L 333 117 L 332 235 L 313 237 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 314 118 L 303 114 L 302 231 L 313 237 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 314 118 L 303 114 L 322 113 L 333 117 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 275 212 L 294 210 L 293 239 L 274 241 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 275 212 L 264 207 L 283 205 L 294 210 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 275 212 L 264 207 L 264 236 L 274 241 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 235 94 L 255 93 L 254 243 L 235 246 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 235 94 L 224 90 L 224 240 L 235 246 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 235 94 L 224 90 L 244 89 L 255 93 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 194 250 L 214 248 L 214 248 L 194 250 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 194 250 L 184 245 L 204 243 L 214 248 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 194 250 L 184 245 L 184 245 L 194 250 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 152 131 L 173 130 L 173 253 L 153 255 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 152 131 L 142 127 L 143 249 L 153 255 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 152 131 L 142 127 L 163 126 L 173 130 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 66 170 L 88 168 L 89 262 L 68 264 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 66 170 L 57 165 L 59 259 L 68 264 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 66 170 L 57 165 L 79 163 L 88 168 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 23 206 L 44 204 L 45 267 L 24 269 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 23 206 L 14 201 L 15 264 L 24 269 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 23 206 L 14 201 L 36 199 L 44 204 Z"  stroke-linejoin="round"></path></g></g><g class="highcharts-markers" visibility="visible"  transform="translate(75,75) scale(1 1)" clip-path="none"></g></g><text x="300" text-anchor="middle" class="highcharts-title"  style="color:#333333;font-size:18px;fill:#333333;width:536px;" y="25"><tspan>3D chart with null values</tspan></text><text x="300" text-anchor="middle" class="highcharts-subtitle"  style="color:#555555;fill:#555555;width:536px;" y="53"><tspan>Notice the difference between a 0 value and a null point</tspan></text><g class="highcharts-legend"  transform="translate(270,364)"><g ><g><g class="highcharts-legend-item"  transform="translate(8,3)"><text x="21" style="color:#333333;font-size:12px;font-weight:bold;cursor:pointer;fill:#333333;" text-anchor="start"  y="15">Sales</text><rect x="0" y="4" width="16" height="12"  fill="#7cb5ec"></rect></g></g></g></g><g class="highcharts-axis-labels highcharts-xaxis-labels" ><text x="110" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="363" z="-59" opacity="1">Jan</text><text x="154" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="358" z="-40" opacity="1">Feb</text><text x="197" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="353" z="-22" opacity="1">Mar</text><text x="239" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="348" z="-3" opacity="1">Apr</text><text x="280" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="343" z="16" opacity="1">May</text><text x="320" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="338" z="35" opacity="1">Jun</text><text x="359" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="334" z="53" opacity="1">Jul</text><text x="398" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="329" z="72" opacity="1">Aug</text><text x="435" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="324" z="91" opacity="1">Sep</text><text x="472" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="320" z="109" opacity="1">Oct</text></g><g class="highcharts-axis-labels highcharts-yaxis-labels" ><text x="502" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="301" z="122" opacity="1">0</text><text x="504" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="244" z="111" opacity="1">2</text><text x="505" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="187" z="100" opacity="1">4</text><text x="506" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="128" z="90" opacity="1">6</text><text x="508" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="69" z="79" opacity="1">8</text></g><g class="highcharts-tooltip"  style="cursor:default;padding:0;white-space:nowrap;" transform="translate(0,-9999)"><path fill="none" d="M 3 0 L 13 0 C 16 0 16 0 16 3 L 16 13 C 16 16 16 16 13 16 L 3 16 C 0 16 0 16 0 13 L 0 3 C 0 0 0 0 3 0"  stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></path><path fill="none" d="M 3 0 L 13 0 C 16 0 16 0 16 3 L 16 13 C 16 16 16 16 13 16 L 3 16 C 0 16 0 16 0 13 L 0 3 C 0 0 0 0 3 0"  stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></path><path fill="none" d="M 3 0 L 13 0 C 16 0 16 0 16 3 L 16 13 C 16 16 16 16 13 16 L 3 16 C 0 16 0 16 0 13 L 0 3 C 0 0 0 0 3 0"  stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></path><path fill="rgb(249, 249, 249)" fill-opacity=" .85" d="M 3 0 L 13 0 C 16 0 16 0 16 3 L 16 13 C 16 16 16 16 13 16 L 3 16 C 0 16 0 16 0 13 L 0 3 C 0 0 0 0 3 0"></path><text x="8"  style="font-size:12px;color:#333333;fill:#333333;" y="21"></text></g><text x="590" text-anchor="end"  style="cursor:pointer;color:#909090;font-size:9px;fill:#909090;" y="395">Highcharts.com</text></svg>

</div>
<section>
	<canvas id="svg-canvas"></canvas>
</section>

Erweitern Sie das Snippet

Answer 33

0

Ich habe aus den Vorschlägen ein sauberes / brauchbares Lesezeichen gemacht.

Neben jeder Inline <svg>auf der Seite wird ein eindeutiger Link eingefügt.

https://codepen.io/corysimmons/pen/vybzqV

Hoffe es hilft jemandem.

Corysimmons
quelle

Link defekt, bitte schauen Sie

Arun Prasad ES

Answer 34

Link defekt, bitte schauen Sie

Arun Prasad ES

Answer 35

-1

Es ist überhaupt keine Programmierung erforderlich. Es gibt Online-Apps, die bereits dafür entwickelt wurden und definierbare Parameter wie Abmessungen, Auflösung, Ausgabeformat usw. enthalten.

Dies ist eine der besseren Online-Bildkonvertierungs-Apps, die ich für svg-> jpeg gefunden habe. http://image.online-convert.com/convert-to-jpg

Jiminy Cricket
quelle

1

Ich glaube nicht, dass Sie die Frage verstanden haben.

Steve Bennett

Answer 36

1

Ich glaube nicht, dass Sie die Frage verstanden haben.

Steve Bennett

So speichern Sie SVG-Zeichenfläche im lokalen Dateisystem

Antworten: