Wie man eine gedrehte linear-gradient svg für den Einsatz als hintergrund-Bild?

Ich habe gesehen, ein paar Fragen tanzen um diese, so hoffe ich, dass dies nicht allzu redundant sind. Im Idealfall würde ich gerne eine image/svg+xml die Waage zu 100% im container.
Colorzilla bekommt von mir einen tollen start mit einem 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>

Hinweis: die width="100%" height="100%" möchte ich an dieser Steigung und drehen Sie Sie um, sagen 65deg
Das HTML5-canvas-API bietet eine großartige Möglichkeit für mich zu bauen, das Bild und verwenden Sie dann .toDataURL() PNG zu polyfill IE8 und IE7, aber ich würde gerne etwas skalierbar für IE9.

Ziel ist es also, zu replizieren:

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

mit einem image/svg+xml mit 100% Breite und Höhe.

Ich habe versucht, aus http://svg-edit.googlecode.com aber das interface war weniger als intuitiv für die Arten der Bearbeitung, die ich tun wollte.
Danke!

InformationsquelleAutor bodine | 2012-01-26

Drehen Sie den Farbverlauf können Sie e.g verwenden Sie die 'gradientTransform' - Attribut, wie hier:

<?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>

InformationsquelleAutor Erik Dahlström

6

Bitte beachten Sie, dass die gradientTransform Attribut dreht sich die Steigung nach, es ist Ankerpunkt auf 0,0. Drehen Sie es aus dem 'Zentrum' Sie berechnen die richtigen Prozentsätze für x1, y1, x2 und y2. Ein einfaches PHP-Beispiel:
```
//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) . '%',
)
```
Einfacher zu legen Sie das drehen-Ursprung in der gradientTransform sicher wie sich die zwei zusätzlichen Argumente an, um das drehen
Könnten Sie ein Beispiel geben, wie man das drehen Herkunft?
in gradientTransform="rotate(90, 50, 30)" der Ursprung der rotation wäre 50, 30
eigentlich in SVG ist es anders als CSS-format Sie haben es mit Kommas. In der SVG-Spezifikation heißt es transformieren Parameter sind "(deg [x, y])" durch ein Leerzeichen getrennt, nicht durch Kommas. Also, dein Beispiel funktioniert mit gradientTransform="rotate(90 50 30)", aber wenn Sie schrieb es in CSS mit inline-verwandeln= es wäre in der Tat mit Kommas als Sie es hatte. Heikle wenig Unterschied hatte mir stecken für eine Weile auf, eine. Verweis: css-tricks.com/transforms-on-svg-elements
Pro w3.org/TR/SVG/coords.html#TransformAttribute - Blättern Sie nach unten, um die BNF sehen dieses etwas... "drehen" wsp* "(" wsp* Anzahl ( Komma-wsp-Nummer Komma-wsp-Nummer )? wsp* ")"

InformationsquelleAutor Giel Berkers

<linearGradient gradientTransform="rotate(65)">

InformationsquelleAutor Henrik Albrechtsson

Giel Berkers' Lösung in Javascript wäre:

//angle can be 0 to 360
var anglePI = (angle) * (Math.PI / 180);
var angleCoords = {
    'x1': Math.round(50 + Math.sin(anglePI) * 50) + '%',
    'y1': Math.round(50 + Math.cos(anglePI) * 50) + '%',
    'x2': Math.round(50 + Math.sin(anglePI + Math.PI) * 50) + '%',
    'y2': Math.round(50 + Math.cos(anglePI + Math.PI) * 50) + '%',
}

InformationsquelleAutor Hooman Askari

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.