How to get a rotated linear gradient svg for use as a background image?

Question

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. C

Answer 1

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) . '%',
)