Lösungen zu Filter, Transformationen und Farbverläufe

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

  1. Um den Text zu erzeugen und zu formatieren, verwenden Sie folgenden Tag:
<text x="10" y="60" style="font-size:46px;font-weight:bolder;fill:none;stroke:black">Text</text>
  1. Um den Verlauf zu definieren, verwenden Sie den Tag <linearGradient> und weisen den Verlauf dann über die fill-Eigenschaft zu:
<defs>
  <linearGradient id="weissrot">
    <stop offset="5%" style="stop-color:white"/>
    <stop offset="100%" style="stop-color:red"/>
  </linearGradient>
</defs>
<text x="10" y="60" style="font-size:46px;font-weight:bolder;fill:url(#weissrot); stroke:black">Text</text>
  1. Einen 3D-Effekt können Sie bspw. mit dem Filter <feComposite> erzielen. Es gibt aber auch Alternativen dazu. Der folgende Code stellt also nur eine mögliche Lösung dar.
<filter id="out">
  <feOffset dx="+2" dy="+2" in="SourceGraphic" result="3d"/>  
  <feComposite in2="SourceGraphic" in="3d" operator="out"/>
</filter>
<text x="10" y="60" style="font-size:46px;font-weight:bolder;filter:url(#out);fill:url(#weissrot);stroke:black">Text</text>
  1. Um den Schatten zu ergänzen, müssen Sie den Filter wie folgt anpassen. Allerdings gibt es auch hierfür mehrere mögliche Lösungen.
<filter id="out">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="Schatten"/>
  <feOffset dx="+2" dy="+2" in="SourceGraphic" result="3d"/>
  <feComposite in2="Schatten" in="3d" operator="over" result="3dBild"/>
  <feComposite in="3dBild" in2="SourceGraphic" operator="out" result="3dBild"/>
</filter>
  1. Um den Lichteffekt zu erzeugen, können Sie Filter wie folgt ergänzen:
<filter id="out">
  ...
  <feDiffuseLighting in="3dBild" diffuseConstant="1" surfaceScale="10" style="lighting-color:yellow" result="licht">
    <feSpotLight x="0" y="0" z="25" pointsAtX="10" pointsAtY="60" pointsAtZ="0" specularExponent="0.01"/>
  </feDiffuseLighting>
</filter>
  1. Um das Muster zu erstellen, verwenden Sie wieder einen Filter, den Sie dann dem Rechteck über das style-Attribut zuweisen. Wichtig ist dabei, dass Sie das Rechteck vor dem Text definieren, da es sonst nicht hinter, sonder über dem Text liegt.
<filter id="muster">
  <feTurbulence in="SourceGraphic" baseFrequency="0.02" numOctaves="1" seed="2" type="turbulence"/>
</filter>
...
<rect x="0" y="10" width="120" height="70" style="filter:url(#muster)"/>
  1. Um die Elemente zu gruppieren, verwenden Sie den <g>-Tag, zum Kippen die Anweisung skewX des transform-Tags:
<g transform="skewX(30)">
  ...
</g>

   

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