Den Button fertigstellen

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

Was nun noch etwas stört, ist natürlich die ungünstige Position in der Grafik. Um das abzustellen, gruppieren Sie einfach die einzelnen Elemente in der Grafik und positionieren die Elemente relativ zum Nullpunkt der Gruppe. Diese können Sie dann an jeden gewünschten Punkt innerhalb der Grafik verschieben.

<?xml version="1.0" standalone="no"?>
...
<svg width="500" height="500">
  <radialGradient id="runderVerlauf" cx="50%" cy="90%" r="60%" fx="60%" fy="80%">
    ...
  </radialGradient>
  <linearGradient id="linearerVerlauf" gradientTransform="rotate(90)">
    ...
  </linearGradient>
  <g transform="translate(20,20)">
    <circle cx="25" cy="25" r="25" style="stroke-width:1;stroke-opacity:0.8;stroke:rgb(222,0,0);opacity:1;fill:url(#runderVerlauf)"/>
    <ellipse cx="25" cy="15" rx="20" ry="12" style="stroke-width:1;stroke:none; opacity:1;fill:url(#linearerVerlauf)"/>
  </g>
</svg>

   

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