Menu
I've seen a few questions dancing around this, so I hope this isn't too redundant. Ideally, I'd like an image/svg+xml which scales to 100% of it's container. Colorzilla gets me a great start with a data:image/svg+xml
<?xml version="1.0" ?> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"> <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#ffffff" stop-opacity="0"/> <stop offset="100%" stop-color="#ff0000" stop-opacity="1"/> </linearGradient> <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" /> </svg> Note: the width="100%" height="100%" I'd like to take this gradient and rotate it by, say 65deg The HTML5 canvas API provides a great way for me to build this image and then use .toDataURL() PNG to polyfill IE8 and IE7, but I'd like something scalable for IE9.
So the goal is to replicate this:
background: linear-gradient(bottom, rgba(239, 239, 214,0) 0%, rgba(239, 239, 214,.8) 100%), linear-gradient(left, rgba(239, 239, 214,0) 60%,rgba(207, 223, 144,1) 100%), linear-gradient(right, rgba(239, 239, 214,0) 0%,rgba(239, 239, 214,1) 60%), linear-gradient(top, rgba(239, 239, 214,0) 60%,#cfdf90 100%); } with an image/svg+xml that's 100% width and height.
I did try out http://svg-edit.googlecode.com but the interface was less than intuitive for the types of editing I wanted to do. Thanks!
704
Because <gradient> s belong to the <image> data type, they can only be used where <image> s can be used. For this reason, linear-gradient() won't work on background-color and other properties that use the <color> data type.
To use a gradient, we have to reference it from an object's fill or stroke attributes. This is done the same way you reference elements in CSS, using a url . In this case, the url is just a reference to our gradient, which I've given the creative ID, "Gradient". To attach it, set the fill to url(#Gradient) , and voila!
SVG provides for two types of gradients: linear gradients and radial gradients. Once defined, gradients are then referenced using 'fill' or 'stroke' properties on a given graphics element to indicate that the given element shall be filled or stroked with the referenced gradient.
To rotate the gradient you can e.g use the 'gradientTransform' attribute, like this:
<?xml version="1.0" ?> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"> <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(65)"> <stop offset="0%" stop-color="#ffffff" stop-opacity="0"/> <stop offset="100%" stop-color="#ff0000" stop-opacity="1"/> </linearGradient> <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" /> </svg>Please note that the gradientTransform attribute rotates the gradient according to it's anchor point at 0,0. To rotate it from the 'center' you need to calculate the proper percentages for x1, y1, x2 and y2. A simple PHP example:
// Rotation can be 0 to 360 $pi = $rotation * (pi() / 180); $coords = array( 'x1' => round(50 + sin($pi) * 50) . '%', 'y1' => round(50 + cos($pi) * 50) . '%', 'x2' => round(50 + sin($pi + pi()) * 50) . '%', 'y2' => round(50 + cos($pi + pi()) * 50) . '%', ) If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
