Comment obtenir une rotation du dégradé linéaire svg pour l'utiliser comme image d'arrière-plan?

J'ai vu à quelques questions de la danse autour de cela, donc j'espère que ce n'est pas trop redondant. Idéalement, j'aimerais un image/svg+xml qui les échelles à 100% de son conteneur.
Colorzilla me fait un bon début avec un 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>

Remarque: le width="100%" height="100%" je voudrais profiter de ce gradient et la faire tourner, par exemple 65deg
Le HTML5 canvas API fournit un excellent moyen pour moi de construire cette image et d'utiliser .toDataURL() PNG de polyfill de IE8 et IE7, mais j'aimerais quelque chose d'évolutif pour IE9.

Donc, le but est de reproduire ce:

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%);
}

avec un image/svg+xml c'est 100% de la largeur et de la hauteur.

Je l'ai fait essayer http://svg-edit.googlecode.com mais l'interface est moins intuitive pour les types de montage que je voulais faire.
Merci!

InformationsquelleAutor bodine | 2012-01-26