Beispiel: 35, Schritt 1 zum 3D-Effekt Download Bsp35_1

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="270" height="245" xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Schritt eins zum Drei-D-Effekt</title>
  <defs>
    <filter id="dreiD" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="weicherSchatten"/>
      <feMerge>
        <feMergeNode in="weicherSchatten"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>

    <style type="text/css"><![CDATA[
      .navigationbg {
        fill: #8888FF;
        stroke: white;
        stroke-width: 3;
      }
      .navigationicon {
        fill: black;
        stroke: white;
        stroke-width: 2;
        stroke-linejoin: round;
      }
      .navigationtextbg {
        fill: #AAAAAA;
        stroke: white;
        stroke-width: 3;
      }
      .navigationtext {
        fill: white;
        stroke: none;
        font-size: 20pt;
        font-family: san serif;
      }
    ]]></style>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="black"/>
  <g id="home" filter="url(#dreiD)">
    <ellipse cx="50" cy="50" rx="30" ry="20" class="navigationbg"/>
    <path d="M 40 60 v -10 h -2 l 12 -12 l 12 12 h -2 v 10 z" class="navigationicon"/>
    <path d="M 70 30 h 150 a 60 30 0 0 1 0 40 h -150 a 60 30 0 0 0 0 -40" class="navigationtextbg"/>
    <text x="90" y="60" class="navigationtext">Startseite</text>
  </g>
  <g id="next" transform="translate(0 70)" filter="url(#dreiD)">
    <ellipse cx="50" cy="50" rx="30" ry="20" class="navigationbg"/>
    <path d="M 35 58 h 20 v 5 l 15 -13 l -15 -13 v 5 h -20 z" class="navigationicon"/>
    <path d="M 70 30 h 150 a 60 30 0 0 1 0 40 h -150 a 60 30 0 0 0 0 -40" class="navigationtextbg"/>
    <text x="110" y="60" class="navigationtext">weiter</text>
  </g>
  <g id="back" transform="translate(0 140)" filter="url(#dreiD)">
    <ellipse cx="50" cy="50" rx="30" ry="20" class="navigationbg"/>
    <path d="M 30 50 l 15 -13 v 5 h 20 v 16 h -20 v 5 z" class="navigationicon"/>
    <path d="M 70 30 h 150 a 60 30 0 0 1 0 40 h -150 a 60 30 0 0 0 0 -40" class="navigationtextbg"/>
    <text x="100" y="60" class="navigationtext">zurueck</text>
  </g>
</svg>

< voriges Beispiel - nächtes Beispiel > Fenster schliessen