Jump to content

Download svg created by php


Julia152
 Share

Recommended Posts

Hello I'm trying to create a download for a svg file that was created before with php. The download and the svg creation works perfectly fine but I don't know how to pass the created svg to the download. I tried to pass the segment value but that doesnt make much sense I guess. So I'm stuck right nw how to pass the created svg to the download. There you can see my code 

 

//INDEX.PHP
<head>
	<title>Segment</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>

<style>
	#svg {
		padding-top: 20px;
	}
</style>
<body>
<div class="container">
	<form method="get">
		<label for="segments">Segmente</label><br/>
		<input type="number" id="segments" name="segment">
		<input type="submit" value="Absenden" name="submit">
	</form>
<?php
session_start();

$getSegment = $_GET['segment'];

$_SESSION['getSegment'] = $getSegment;

if (isset($getSegment) && !empty($getSegment)) {
	function segment_circle($segments) {

		$size = 200;
		$radius = $size / 2;
		$segment_arc = 360 / $segments;
		$segment_mid = ($segment_arc + 180) / 2;

		$generate_arc = function($start_angle, $end_angle) use ($radius, $segment_mid) {

			$start = [
				'x' => $radius + ($radius * cos(($end_angle - $segment_mid) * pi() / 180)),
				'y' => $radius + ($radius * sin(($end_angle - $segment_mid) * pi() / 180))
			];

			$end = [
				'x' => $radius + ($radius * cos(($start_angle - $segment_mid) * pi() / 180)),
				'y' => $radius + ($radius * sin(($start_angle - $segment_mid) * pi() / 180))
			];

			if ($end_angle - $start_angle <= 180) {
				$arc = 0;
			} else {
				$arc = 1;
			}

			//Zeichnet ein Segment
			return implode(' ', [
				'M', $start[ 'x' ], $start[ 'y' ],
				'A', $radius, $radius, 0, $arc, 0, $end[ 'x' ], $end[ 'y' ],
				'L', $radius, $radius, 'Z'
			]);
		};

		?>
			<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" id="svg">
				<?php for ($i = 0; $i < 1; $i++): ?>
					<?php
					$start_angle = $segment_arc * $i;
					$end_angle = $segment_arc * ($i + 1);
					?>
					<path fill="#red" stroke-width="0" d="<?php echo $generate_arc($start_angle, $end_angle) ?>" />
				<?php endfor ?>
			</svg>
		</div>
	<div class="container">
		<button class="btn btn-primary" onclick="location.href='download.php'">Download</button>
	</div>
</body>

<?php
	}
	echo segment_circle($getSegment);
} else if (!isset($getSegment) || empty($getSegment)) {
	echo 'Bitte trag eine Segmentanzahl ein!';
}
//DOWNLOAD.PHP
<?php

session_start();

$getSegment = $_GET['getSegment'];

header('Content-Disposition: attachment; filename="segment.svg');
header('Content-Type: text/plain');
header('Content-Length: ' . strlen($getSegment));
header('Connection: close');

echo $getSegment;

exit();

 

Link to comment
Share on other sites

It would be easier to do this with Javascript, actually, by creating an <a> with the SVG data plus a special "download" attribute.

Example:

<svg id="svg">...</svg>

<div id="download" class="container"></div>

<script>
(function() {
	var a = document.createElement("a");
	a.href = "data:image/svg;base64," + btoa(document.getElementById("svg").outerHTML);
	a.download = "segment.svg";

	document.getElementById("download").appendChild(a);
})();
</script>

 

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.