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!
Vous devez vous connecter pour publier un commentaire.
Pour faire pivoter le dégradé que vous pouvez envoyer.g utiliser la gradientTransform' attribut, comme ceci:
Veuillez noter que le
gradientTransform
attribut tourne le gradient de la fonction de son point d'ancrage à 0,0. Pour la faire tourner à partir du 'centre' vous avez besoin pour calculer les pourcentages appropriés pour x1, y1, x2 et y2. Un simple en PHP par exemple:Giel Berkers solution en Javascript serait: