Datei:SVG Uhr animiert grau.svg

Datei
Dateiversionen
Dateiverwendung
Metadaten

Größe dieser Vorschau: 512 × 512 Pixel. Weitere Auflösungen: 240 × 240 Pixel | 480 × 480 Pixel | 768 × 768 Pixel | 1.024 × 1.024 Pixel | 2.048 × 2.048 Pixel.

Originaldatei ‎(Animierte SVG-Datei, Basisgröße 512 × 512 Pixel, Dateigröße: 9 KB)

Hinweis: Aufgrund technischer Beschränkungen werden Vorschaubilder dieser Datei nicht animiert.

Beschreibung

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="-500 -500 1000 1000" version="1.1"
  >
  <style type="text/css">
    <![CDATA[
    #shand {fill:LightSteelBlue ;stroke:#333 ;}
    #mhand {fill:LightSlateGray;stroke:#333 ;}
    #hhand {fill:#666;stroke:#333 ;}
    .slowfo {fill:lime;stroke:DarkSlateGray ;}
    .sitext { fill: #666}
    text { font-size: 30}
  ]]>
  </style>
  <defs>
    <radialGradient id="rg1">
      <stop offset="0%" stop-color="#aaa" />
      <stop offset="100%" stop-color="#333" />
    </radialGradient>
    <line id="li" y1="98" y2="116" stroke="#999" stroke-width="5" />
    <line id="t" y1="103" y2="116" stroke="#aaa" stroke-width="3" />
    <g id="m">
      <use xlink:href="#li" />
      <use xlink:href="#t" transform="rotate(6)" />
      <use xlink:href="#t" transform="rotate(12)" />
      <use xlink:href="#t" transform="rotate(18)" />
      <use xlink:href="#t" transform="rotate(24)" />
    </g>
    <g id="n">
      <use xlink:href="#m" />
      <use xlink:href="#m" transform="rotate(30)" />
      <use xlink:href="#m" transform="rotate(60)" />
    </g>
    <linearGradient id="lg" x1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#333" />
      <stop offset="1" stop-color="#aaa"  />
    </linearGradient>
    <linearGradient id="lgb" x1="0" x2="1" y2="1" >
      <stop offset="0" stop-color="#aaa" />
      <stop offset="1" stop-color="#333" />
    </linearGradient>
    <linearGradient id="l2" x1="1" x2="0" y1="1" y2="0" >
      <stop offset="0" stop-color="#333" />
      <stop offset="1" stop-color="#aaa"  />
    </linearGradient>
    <g id="button" transform="scale(0.3)" >
      <circle r="100" fill="url(#lg)" transform="rotate(135)"
   stroke="url(#lgb)" stroke-width="6"/>
      <circle r="80" fill="url(#lg)" transform="rotate(315)"
   stroke="none" />
    </g>
  </defs>
  <g transform="scale(3.9)">
    <use xlink:href="#n" />
    <use xlink:href="#n" transform="rotate(90)" />
    <use xlink:href="#n" transform="rotate(180)" />
    <use xlink:href="#n" transform="rotate(270)" />
  </g>
  <g id="hhand" opacity="1" transform="rotate(0)">
    <path transform="scale(1.8) rotate(0)" d="m-20 0 L0 40 20 0 0 -170 z" stroke-width="0.5" >
      <desc>Stundenzeiger hour hands </desc>
    </path>
    <animateTransform attributeName="transform"
    type="rotate" values="0; 360 "
    repeatDur="indefinite" dur="43200s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="slf.click;" end="reset.click;freeze.click;set.click;ff.click;fb.click;slb.click;"
    repeatDur="indefinite" dur="720s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="ff.click;" end="reset.click;freeze.click;set.click;slf.click;fb.click;slb.click;"
    repeatDur="indefinite" dur="72s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;-360"
    begin="slb.click;" end="reset.click;freeze.click;set.click;ff.click;fb.click;slf.click;"
    repeatDur="indefinite" dur="720s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;-360"
    begin="fb.click;" end="reset.click;freeze.click;set.click;ff.click;slb.click;slb.click;"
    repeatDur="indefinite" dur="72s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="reset.click;" end="freeze.click"
    repeatDur="indefinite" dur="43200s"
    additive="replace" fill="freeze" />
  </g>
  <g id="mhand" opacity="1" transform="rotate(0)">
    <path transform="scale(1.8)" d="M-20 0 L0 40 20 0 0 -200 z" stroke-width="0.5" >
      <desc> Minutenzeiger minute hands </desc>
    </path>
    <animateTransform attributeName="transform"
    type="rotate" values="0; 360 "
    repeatDur="indefinite" dur="3600s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="slf.click;" end="reset.click;freeze.click;set.click;ff.click;fb.click;slb.click;"
    repeatDur="indefinite" dur="60s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="ff.click;" end="reset.click;freeze.click;set.click;slf.click;fb.click;slb.click;"
    repeatDur="indefinite" dur="6s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;-360"
    begin="slb.click;" end="reset.click;freeze.click;set.click;ff.click;fb.click;slf.click;"
    repeatDur="indefinite" dur="60s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;-360"
    begin="fb.click;" end="reset.click;freeze.click;set.click;ff.click;slb.click;slb.click;"
    repeatDur="indefinite" dur="6s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="reset.click;" end="freeze.click"
    repeatDur="indefinite" dur="3600s"
    additive="replace" fill="freeze" />
  </g>
  <g id="shand" opacity="1" transform="rotate(0)">
    <path transform="scale(1.7) rotate(0)" d="M-3 0 L0 40 3 0 0 -270 z" stroke-width="0.5" onclick="alert('You have clicked the shand.')" >
      <desc> Minutenzeiger minute hands </desc>
    </path>
    <animateTransform attributeName="transform"
    type="rotate" values="0; 360 "
    repeatDur="indefinite" dur="60s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="slf.click;" end="reset.click;freeze.click;set.click;ff.click;fb.click;slb.click;"
    repeatDur="indefinite" dur="1s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="ff.click;" end="reset.click;freeze.click;set.click;slf.click;fb.click;slb.click;"
    repeatDur="indefinite" dur="0.1s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;-360"
    begin="slb.click;" end="reset.click;freeze.click;set.click;ff.click;fb.click;slf.click;"
    repeatDur="indefinite" dur="1s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;-360"
    begin="fb.click;" end="reset.click;freeze.click;set.click;ff.click;slb.click;slb.click;"
    repeatDur="indefinite" dur="0.1s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="reset.click;" end="freeze.click"
    repeatDur="indefinite" dur="60s"
    additive="replace" fill="freeze" />
    <animate attributeName="opacity"
    values="0"
    end="reset.click;freeze.click;set.click;" begin="ff.click;slf.click;fb.click;slb.click;"
    repeatDur="indefinite"
    additive="replace" fill="freeze" />
    <animate attributeName="opacity"
    values="1"
    begin="reset.click;freeze.click;set.click;"
    repeatDur="indefinite"
    additive="replace" fill="freeze" />
  </g>
  <circle r="8" fill="url(#rg1)" stroke="purple" stroke-width="0.5" />
  <circle r="510" fill="url(#r)" stroke="none" opacity="1" />
  <circle r="460" fill="none" stroke="#333" stroke-width="0" />
  <g transform="translate(550,-250)" >
    <use xlink:href="#button" id="reset" />
    <text class="sitext" x="50" font-size="30" >reset time
    
      <tspan x="50" dy="30" font-size="16" fill="#fff" >small text</tspan>
    </text>
    <g id="slf">
      <use xlink:href="#button" y="100" />
    </g>
    <text class="sitext" dy="100" x="50" font-size="30" >slow forward
    
      <tspan x="50" dy="30" font-size="16">(hides seconds hand)</tspan>
    </text>
    <g id="ff">
      <use xlink:href="#button" y="200" />
    </g>
    <text class="sitext" dy="200" x="50" font-size="30" >fast forward
    
      <tspan x="50" dy="30" font-size="16">(hides seconds hand)</tspan>
    </text>
    <g id="slb" >
      <use xlink:href="#button" y="300" />
    </g>
    <text class="sitext" dy="300" x="50" font-size="30">slow backward
    
      <tspan x="50" dy="30" font-size="16">(hides seconds hand)</tspan>
    </text>
    <g id="fb" >
      <use xlink:href="#button" y="400" />
    </g>
    <text class="sitext" dy="400" x="50" font-size="30" >fast backward
    
      <tspan x="50" dy="30" font-size="16">(hides seconds hand)</tspan>
    </text>
    <use xlink:href="#button" y="500" id="set" />
    <text dy="500" class="sitext" x="50" font-size="30" >set time</text>
  </g>
  <circle r="30" id="crot" fill="url(#discr)" />
</svg>

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="-500 -500 1000 1000" version="1.1"
  >
  <style type="text/css">
    <![CDATA[
    #shand {fill:LightSteelBlue ;stroke:#333 ;}
    #mhand {fill:LightSlateGray;stroke:#333 ;}
    #hhand {fill:#666;stroke:#333 ;}
    .slowfo {fill:lime;stroke:DarkSlateGray ;}
    .sitext { fill: #666}
    text { font-size: 30}
  ]]>
  </style>
  <defs>
    <radialGradient id="rg1">
      <stop offset="0%" stop-color="#aaa" />
      <stop offset="100%" stop-color="#333" />
    </radialGradient>
    <line id="li" y1="98" y2="116" stroke="#999" stroke-width="5" />
    <line id="t" y1="103" y2="116" stroke="#aaa" stroke-width="3" />
    <g id="m">
      <use xlink:href="#li" />
      <use xlink:href="#t" transform="rotate(6)" />
      <use xlink:href="#t" transform="rotate(12)" />
      <use xlink:href="#t" transform="rotate(18)" />
      <use xlink:href="#t" transform="rotate(24)" />
    </g>
    <g id="n">
      <use xlink:href="#m" />
      <use xlink:href="#m" transform="rotate(30)" />
      <use xlink:href="#m" transform="rotate(60)" />
    </g>
    <linearGradient id="lg" x1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#333" />
      <stop offset="1" stop-color="#aaa"  />
    </linearGradient>
    <linearGradient id="lgb" x1="0" x2="1" y2="1" >
      <stop offset="0" stop-color="#aaa" />
      <stop offset="1" stop-color="#333" />
    </linearGradient>
    <linearGradient id="l2" x1="1" x2="0" y1="1" y2="0" >
      <stop offset="0" stop-color="#333" />
      <stop offset="1" stop-color="#aaa"  />
    </linearGradient>
    <g id="button" transform="scale(0.3)" >
      <circle r="100" fill="url(#lg)" transform="rotate(135)"
   stroke="url(#lgb)" stroke-width="6"/>
      <circle r="80" fill="url(#lg)" transform="rotate(315)"
   stroke="none" />
    </g>
  </defs>
  <g transform="scale(3.9)">
    <use xlink:href="#n" />
    <use xlink:href="#n" transform="rotate(90)" />
    <use xlink:href="#n" transform="rotate(180)" />
    <use xlink:href="#n" transform="rotate(270)" />
  </g>
  <g id="hhand" opacity="1" transform="rotate(0)">
    <path transform="scale(1.8) rotate(0)" d="m-20 0 L0 40 20 0 0 -170 z" stroke-width="0.5" >
      <desc>Stundenzeiger hour hands </desc>
    </path>
    <animateTransform attributeName="transform"
    type="rotate" values="0; 360 "
    repeatDur="indefinite" dur="43200s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="slf.click;" end="reset.click;freeze.click;set.click;ff.click;fb.click;slb.click;"
    repeatDur="indefinite" dur="720s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="ff.click;" end="reset.click;freeze.click;set.click;slf.click;fb.click;slb.click;"
    repeatDur="indefinite" dur="72s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;-360"
    begin="slb.click;" end="reset.click;freeze.click;set.click;ff.click;fb.click;slf.click;"
    repeatDur="indefinite" dur="720s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;-360"
    begin="fb.click;" end="reset.click;freeze.click;set.click;ff.click;slb.click;slb.click;"
    repeatDur="indefinite" dur="72s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="reset.click;" end="freeze.click"
    repeatDur="indefinite" dur="43200s"
    additive="replace" fill="freeze" />
  </g>
  <g id="mhand" opacity="1" transform="rotate(0)">
    <path transform="scale(1.8)" d="M-20 0 L0 40 20 0 0 -200 z" stroke-width="0.5" >
      <desc> Minutenzeiger minute hands </desc>
    </path>
    <animateTransform attributeName="transform"
    type="rotate" values="0; 360 "
    repeatDur="indefinite" dur="3600s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="slf.click;" end="reset.click;freeze.click;set.click;ff.click;fb.click;slb.click;"
    repeatDur="indefinite" dur="60s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="ff.click;" end="reset.click;freeze.click;set.click;slf.click;fb.click;slb.click;"
    repeatDur="indefinite" dur="6s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;-360"
    begin="slb.click;" end="reset.click;freeze.click;set.click;ff.click;fb.click;slf.click;"
    repeatDur="indefinite" dur="60s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;-360"
    begin="fb.click;" end="reset.click;freeze.click;set.click;ff.click;slb.click;slb.click;"
    repeatDur="indefinite" dur="6s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="reset.click;" end="freeze.click"
    repeatDur="indefinite" dur="3600s"
    additive="replace" fill="freeze" />
  </g>
  <g id="shand" opacity="1" transform="rotate(0)">
    <path transform="scale(1.7) rotate(0)" d="M-3 0 L0 40 3 0 0 -270 z" stroke-width="0.5" onclick="alert('You have clicked the shand.')" >
      <desc> Minutenzeiger minute hands </desc>
    </path>
    <animateTransform attributeName="transform"
    type="rotate" values="0; 360 "
    repeatDur="indefinite" dur="60s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="slf.click;" end="reset.click;freeze.click;set.click;ff.click;fb.click;slb.click;"
    repeatDur="indefinite" dur="1s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="ff.click;" end="reset.click;freeze.click;set.click;slf.click;fb.click;slb.click;"
    repeatDur="indefinite" dur="0.1s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;-360"
    begin="slb.click;" end="reset.click;freeze.click;set.click;ff.click;fb.click;slf.click;"
    repeatDur="indefinite" dur="1s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;-360"
    begin="fb.click;" end="reset.click;freeze.click;set.click;ff.click;slb.click;slb.click;"
    repeatDur="indefinite" dur="0.1s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="reset.click;" end="freeze.click"
    repeatDur="indefinite" dur="60s"
    additive="replace" fill="freeze" />
    <animate attributeName="opacity"
    values="0"
    end="reset.click;freeze.click;set.click;" begin="ff.click;slf.click;fb.click;slb.click;"
    repeatDur="indefinite"
    additive="replace" fill="freeze" />
    <animate attributeName="opacity"
    values="1"
    begin="reset.click;freeze.click;set.click;"
    repeatDur="indefinite"
    additive="replace" fill="freeze" />
  </g>
  <circle r="8" fill="url(#rg1)" stroke="purple" stroke-width="0.5" />
  <circle r="510" fill="url(#r)" stroke="none" opacity="1" />
  <circle r="460" fill="none" stroke="#333" stroke-width="0" />
  <g transform="translate(550,-250)" >
    <use xlink:href="#button" id="reset" />
    <text class="sitext" x="50" font-size="30" >reset time
    
      <tspan x="50" dy="30" font-size="16" fill="#fff" >small text</tspan>
    </text>
    <g id="slf">
      <use xlink:href="#button" y="100" />
    </g>
    <text class="sitext" dy="100" x="50" font-size="30" >slow forward
    
      <tspan x="50" dy="30" font-size="16">(hides seconds hand)</tspan>
    </text>
    <g id="ff">
      <use xlink:href="#button" y="200" />
    </g>
    <text class="sitext" dy="200" x="50" font-size="30" >fast forward
    
      <tspan x="50" dy="30" font-size="16">(hides seconds hand)</tspan>
    </text>
    <g id="slb" >
      <use xlink:href="#button" y="300" />
    </g>
    <text class="sitext" dy="300" x="50" font-size="30">slow backward
    
      <tspan x="50" dy="30" font-size="16">(hides seconds hand)</tspan>
    </text>
    <g id="fb" >
      <use xlink:href="#button" y="400" />
    </g>
    <text class="sitext" dy="400" x="50" font-size="30" >fast backward
    
      <tspan x="50" dy="30" font-size="16">(hides seconds hand)</tspan>
    </text>
    <use xlink:href="#button" y="500" id="set" />
    <text dy="500" class="sitext" x="50" font-size="30" >set time</text>
  </g>
  <circle r="30" id="crot" fill="url(#discr)" />
</svg>

Dateiversionen

Klicke auf einen Zeitpunkt, um diese Version zu laden.

	Version vom	Vorschaubild	Maße	Benutzer	Kommentar
aktuell	15:19, 10. Jan. 2020		512 × 512 (9 KB)	Lily (Diskussion \| Beiträge)	{{SVG Code\|1=<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-500 -500 1000 1000" version="1.1" > <style type="text/css"> <![CDATA[ #shand {fill:LightSteelBlue ;stroke:#333 ;} #mhand {fill:LightSlateGray;stroke:#333 ;} #hhand {fill:#666;stroke:#333 ;} .slowfo {fill:lime;stroke:DarkSlateGray ;} .sitext { fill: #666} text { font-size: 30} ]]> </style> <defs> <radialGradient id="rg1"> <stop offset="0%…

Du kannst diese Datei nicht überschreiben.

Dateiverwendung

Keine Seiten verwenden diese Datei.

Metadaten

Diese Datei enthält weitere Informationen, die in der Regel von der Digitalkamera oder dem verwendeten Scanner stammen. Durch nachträgliche Bearbeitung der Originaldatei können einige Details verändert worden sein.

Breite	100%
Höhe	100%

Datei:SVG Uhr animiert grau.svg

Beschreibung

Dateiversionen

Dateiverwendung

Metadaten

Navigationsmenü

Suche