Verlaufsdefinitionen auf unterschiedliche Formen anwendbar, unabhängig von deren tatsächlichen Ausmaßen. Die Elemente linearGradient und radialGradient haben einen Elementinhalt, der aus stop -Elementen besteht. Mit diesen Elementen bestimmen Sie eine Farbe (Attribut stop-color ), deren Position (Attribut stop-offset ) und ihre Deckkraft (Attribut stop-opacity ). Um einen so definierten Farbverlauf auf eine Form anzuwenden, notieren Sie in der gewünschten Form, also einem Element wie z. B. oder , ein fill -Attribut. Diesem Attribut weisen Sie jedoch keine Farbe zu, sondern den Ausdruck url(#id_Name) , wobei id_Name (ohne das Gatterzeichen) ein Name ist, den Sie im id -Attribut eines linearGradient - oder radialGradient -Elements vergeben haben. Sie können ein linearGradient - oder radialGradient -Element beliebig vielen Formen-Elementen zuweisen. Text hinzufügen Sie können Text innerhalb der Grafik positionieren und formatieren. Beispiel
Bild 7.7: Text mit SVG Text wird durch …
markiert. Elementinhalt ist der Text, der angezeigt werden soll. Im einleitenden -Tag erhält der Text seine Eigenschaften. Mit den Attributen x und y werden Horizontal- und Vertikalversatz der Textanfangsposition angegeben. Beachten Sie beim y -Wert, dass die Basislinie des Textes dafür relevant ist, der Text also je nach Schriftgröße weiter oben oder weiter unten beginnt. Mit font-family können Sie eine Schriftart oder eine Reihenfolge gewünschter Schriftarten bestimmen. Mit font-size legen Sie die Schriftgröße fest. Mit font-weight="bold" können Sie Fettschrift erzwingen. Es gibt weitere Eigenschaften zur Schriftformatierung. Diese entsprechen denen von CSS. Es ist sogar möglich, die Eigenschaften direkt in HTML mit Hilfe eines style -Attributs und CSS-Syntax zu notieren, also etwa: … Mit dem fill -Attribut legen Sie die Schriftfarbe fest. Mit einem stroke -Attribut können Sie außerdem eine Kontur/Umrissfarbe bestimmen. Durch transform="rotate( … )" können Sie Text (und übrigens auch Formen wie Rechtecke) drehen. Innerhalb der Klammern bei rotate( … ) werden drei Zahlen notiert. Die erste ist der Drehwinkel. Um Text senkrecht zu stellen, benutzen Sie 90 (für oben nach unten) oder 270 (für unten nach oben). Die zweite Zahl ist der X-Drehpunkt, die dritte der Y-Drehpunkt. Wenn Sie diesbezüglich keine besonderen Angaben machen möchten, notieren Sie 0. Beachten Sie, dass die Positionsangaben, die bei den Attributen x und y notiert werden, durch eine Rotation eine andere Bedeutung erhalten. 7.2.4 Generierte Vektorgrafik mit dem canvas-Element Das mit HTML5 neu eingeführte canvas -Element ist neben SVG die andere Möglichkeit, um Vektorgrafik in HTML einzubinden. Das canvas -Element ist dabei allerdings nur ein Behälter, eine Aktionsfläche mit definierten Ausmaßen. Was innerhalb davon geschieht, wird durch Scripting, also durch Programmierung erreicht. Bislang gab es jedoch in ECMA/JavaScript keine geeigneten Objekte für Vektorgrafik. Deshalb hat der HTML5-Standard gleich ein solches Objekt mit definiert: den CanvasRenderingContext2D . Das bedeutet aber auch: Das canvas -Element ist nicht automatisch ein Container für dieses Objekt, und seine Fähigkeiten sind nicht auf die Möglichkeiten dieses Objekts beschränkt. Das CanvasRenderingContext2D-Objekt ist nur eine zunächst mal mit auf den Weg gegebene Anwendungsmöglichkeit für canvas . Hinweise zu CanvasRenderingContext2D Wenn Sie keine Programmierkenntnisse haben, werden Sie möglicherweise nicht alle Inhalte der Beispiele in diesem Abschnitt verstehen. Das ist normal und unvermeidbar. Der Buchabschnitt soll Sie jedoch auch ohne große Programmierkenntnisse dazu befähigen, einfache Vektorgrafiken mit JavaScript und CanvasRenderingContext2D zu erzeugen. Dabei wird
Kostenlos Online Lesen 
