Notwendige Symbole erzeugen

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

Zur einfacheren Definition der einzelnen Kästen, Buttons und Tooltips sollten Sie diese als Symbole definieren und mit dem <use>-Tag instanzieren. Dabei können Sie dann auch die zu verwendenden Verläufe und Filter festlegen. Im folgenden Listing werden die benötigten Symbole und Stylesheets definiert. Die Aufgaben der Symbole zeigt die folgende Tabelle.

Die Stylesheets werden für die Formatierung des Textes verwendet. Wenn Sie anders als bisher gezeigt keine Formatierungen für Tags festlegen wollen, sondern eigene Formate definieren möchten, müssen Sie dazu wie im Listing zunächst den Tag angeben, in dem die Formatierung verwendet werden soll, hier also text. Danach folgt ein Punkt und dann der Formatname, den Sie mit dem class-Attribut des Tags zuweisen. Im Listing werden damit also die Formate titel und info für den <text>-Tag festgelegt. Sie formatieren den Titel und den Text der Kästen.

Die definierten Symbole sollten keine Verständnisschwierigkeiten machen. Sie verwenden lediglich Altbekanntes. Um sie jedoch an Ihre Anforderungen anpassen zu können, müssen Sie natürlich wissen, welches Symbol in welcher Weise verwendet wird. Das zeigt die folgende Tabelle.

Tabelle: Bedeutungen der einzelnen Symbole.

Symbol Verwendung
smKasten Erzeugt den grauen Kasten mit den abgerundeten Ecken, in denen die Informationen angezeigt werden. Das Symbol definiert Farbverlauf und Schatten.
smButton Definiert den roten Button zum Schließen der Fenster. Der Code entspricht im Wesentlichen dem der Datei button.svg aus dem vorherigen Kapitel.
smTooltipp Definiert den kleinen Tooltip, also den grau gefüllten Kasten mit dem Schriftzug "Schließen".
smKastenHor Erzeugt die Kreise, die als Fenster für die horizontale Navigation verwendet werden.
<?xml version="1.0" encoding="iso-8859-1"?>
...
<svg width="800" height="600" viewBox="0 0 800 600">
  <defs>
    <style type="text/css">
      <![CDATA[
       a {fill:rgb(255,110,110);}
         a.weiss {fill:white;}
         a.schwarz {fill:black;}
         text.titel {fill:rgb(255,110,110);font-family:Arial,Helvetica;font-size:16px;font-stretch:ultra-expanded;font-weight:bold}
         text.info {fill:black;font-family:Arial,Helvetica;font-size:11px;kerning:0.18;font-weight:normal;opacity:1}
      ]]>
    </style>
    <symbol id="smKasten">
      <defs>
        <filter id="3D" filterUnits="objectBoundingBox">
          <feGaussianBlur in="SourceAlpha" stdDeviation="8" result="Schatten"/>
          <feOffset dx="+8" dy="+8" in="Schatten" result="Schatten"/>
          <feComposite in="SourceGraphic" in2="Schatten" operator="normal"/>
        </filter>
      </defs>
      <rect x="0" y="0" width="400" height="400" rx="15" ry="15" style="fill:url(#verlaufgrauKasten);stroke:rgb(0,0,0);stroke-width:1;filter:url(#3D)"/>
    </symbol>
    <symbol id="smKastenHor">
      <defs>
        <filter id="3Dh" filterUnits="objectBoundingBox">
          <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="Schatten"/>
          <feOffset dx="+4" dy="+4" in="Schatten" result="Schatten"/>
          <feComposite in="SourceGraphic" in2="Schatten" operator="normal"/>
        </filter>
      </defs>
      <circle cx="100" cy="100" r="100" style="fill:url(#runderVerlauf);stroke:rgb(0,0,0);stroke-width:1;filter:url(#3Dh);"/>
    </symbol>
    <symbol id="smTooltipp">
      <g id="tooltipp" transfer="translate(25,25)">
        <rect x="0" y="0" width="60" height="16" style="fill:url(#verlaufgrauKasten);stroke:black"/>
        <text class="info" x="5" y="12">Schließen</text>  
      </g>
    </symbol>
    <symbol id="smButton">
      <defs>
        <g id="Bttn">
          <desc>Der Button</desc>
          <circle cx="25" cy="25" r="25" style="stroke-width:1;stroke-opacity:0.8;stroke:rgb(222,0,0);fill-opacity:1;opacity:1;fill:url(#runderVerlauf)"/>
          <ellipse cx="25" cy="15" rx="20" ry="12" style="stroke-width:1;stroke:none;fill-opacity:1;opacity:1;fill:url(#linearerVerlauf)"/>
        </g>
        <filter id="SVGObjekt" filterUnits="userSpaceOnUse" width="150" heigth="150">
          <feGaussianBlur id="Schatten" in="SourceAlpha" stdDeviation="12 6" result="Schatten">
            <animate attributeName="stdDeviation" begin="2s" dur="0.5s" values="6,3"/>
          </feGaussianBlur>
          <feImage xlink:href="#Bttn" result="Button"/>
          <feMerge>
            <feMergeNode in="Schatten"/>
            <feMergeNode in="Button"/>
          </feMerge>
        </filter>
        <desc>Es folgen die Farbverläufe</desc>
        <radialGradient id="runderVerlauf" cx="50%" cy="90%" r="60%" fx="60%" fy="80%">
          <stop offset="0%" style="stop-color:rgb(255,150,150);stop-opacity:1"/>
          <stop offset="1%" style="stop-color:rgb(255,128,128);stop-opacity:1"/>
          <stop offset="50%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
        </radialGradient>
        <linearGradient id="linearerVerlauf" gradientTransform="rotate(90)">
          <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1"/>
          <stop offset="90%" style="stop-color:rgb(255,1,1);stop-opacity:1"/>
        </linearGradient>
      </defs>
      <g transform="translate(0,0)">
        <g transform="translate(20,20), scale(0.7)" style="filter:url(#SVGObjekt)" id="roterButton">
          <desc>Der Button</desc>
          <circle cx="25" cy="25" r="25" style="stroke-width:1;stroke-opacity:0.8;stroke:rgb(222,0,0);fill-opacity:1;opacity:1;fill:url(#runderVerlauf)"/>
          <ellipse cx="25" cy="15" rx="20" ry="12" style="stroke-width:1;stroke:none;fill-opacity:1;opacity:1;fill:url(#linearerVerlauf)"/>
        </g>
      </g>
    </symbol>
    <linearGradient id="verlaufgrauKasten" spreadMethod="reflect" gradientTransform="">
      <stop offset="0%" style="stop-color:darkgray;stop-opacity:1"/>
      <stop offset="100%" style="stop-color:white;stop-opacity:1"/>
    </linearGradient>

   

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de