Skip to content

Instantly share code, notes, and snippets.

@zurie
Created September 23, 2015 17:33
Show Gist options
  • Save zurie/4fa0917406a43a9dac4c to your computer and use it in GitHub Desktop.
Save zurie/4fa0917406a43a9dac4c to your computer and use it in GitHub Desktop.
Dynamic Linear Gradient in PHP outputs in SVG
<?php
/**
* This function takes in a color string and test whether it is in hex format.
* If so it will simply return a '#' prefixed version to make it the standard
* hex format, or return it as-is.
*
* This is done to make linking to this file within css a bit easier, since we'd
* need to escape the '#' so the browser doesn't treat it as a hash and ignore
* it when requesting content. Otherwise users would have to link using:
*
* url:(linear-gradient.php?start-color=%23AABBCC&end-color=%23CCBBAA);
*
* Which is not developer friendly.
*/
function fixupColor($color) {
if (is_null($color)) {
return "#000";
}
if (preg_match('/^[a-gA-G0-9]{3}([a-gA-G0-9]{3})?$/', $color)) {
return "#".$color;
}
// return as-is
return $color;
}
/* start processing */
$start = fixupColor($_REQUEST["start-color"]);
$end = fixupColor($_REQUEST["end-color"]);
$startOpacity = $_REQUEST["start-opacity"];
$endOpacity = $_REQUEST["end-opacity"];
if (is_null($startOpacity)) $startOpacity = "1";
if (is_null($endOpacity)) $endOpacity = "1";
header('Content-type: image/svg+xml');
echo '<?xml version="1.0" ?>'; ?>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.0" width="100%"
height="100%"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="linear-gradient"
x1="0%" y1="0%"
x2="0%" y2="100%"
spreadMethod="pad">
<stop offset="0%" stop-color="<?php echo $start; ?>" stop-opacity="<?php echo $startOpacity; ?>" />
<stop offset="100%" stop-color="<?php echo $end; ?>" stop-opacity="<?php echo $endOpacity; ?>" />
</linearGradient>
</defs>
<rect width="100%" height="100%"
style="fill:url(#linear-gradient);" />
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment