loading ...

Icon Sturmwarnung

Einleitung

Für mein "Personal-Badiwidget" habe ich ein SVG für Sturmwarnungen entwickelt.

Bedeutung der Warnstufen

Wikipediaeintrag

Sturmwarntafel am Bodensee
de.wikipedia.org/wiki/Sturmwarnung. Foto: Stefan-Xp; CC BY-SA 3.0

Kantonspolizei Zürich

Starkwindwarnung

Die Starkwindwarnung (orangefarbenes Blinklicht, das pro Minute ungefähr 40 mal aufleuchtet) macht auf die Gefahr des Aufkommens von Winden mit Böenspitzen von 25-33 Knoten (ca. 46-61 km/h) ohne nähere Zeitangabe aufmerksam.

Sturmwarnung

Die Sturmwarnung (orangefarbiges Blinklicht, das pro Minute ungefähr 90 mal aufleuchtet) macht auf die Gefahr des Aufkommens von Winden mit Böenspitzen von über 33 Knoten (ca. 61 km/h) ohne nähere Zeitangabe aufmerksam.

Quelle: www.kapo.zh.ch/...

Basis Icons

Beide Varianten basieren auf demselben SVG und können Inline oder über externe CSS-Styles angepasst werden.

Icon Sturmwarnung
Sturmwarnung 90 | icon-sturmwarnung-90-color.svg
Icon Starkwindwarnung
Sturmwarnung 40 | icon-sturmwarnung-40-color.svg

Beispiel externer Stylsheet

Icon with Test Stylesheet 
<style>
    #storm-numbers path { fill: fuchsia; }
    #storm-inner-circle { fill: aqua; stroke: black; }
    #section-1-flash { fill: purple; }
    #section-2-flash { fill: blue; }
    #section-4-flash { fill: silver; }
    #section-3-circle { fill: lime; }
    #section-4-circle { fill: yellow; }
</style>
Sturmwarnung mit individuellen Styles via externem Stylesheet.

Background-Image

Das SVG kann auch direkt im CSS als Background-Image definiert werden. Beachten Sie, dass Sie aus dem SVG-Code alle Zeilenumbrüche entfernen müssen. Die Breite passt sich durch den Wert width: 100%; an die Breite des Elternelements an. Die Höhe wird durch den Wert height: auto; entsprechend angepasst.

<style>
.svg-icon {
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" ... 388V152.582z"/></g></svg>');
background-size: 100%;
background-repeat: no-repeat;
padding: 0;
margin: 0;
width: 100%;
height: auto;
etc....
}
</style>

Animation

Durch die Unterteilung in 4 Sektionen können beide Varianten animiert werden. Im nachfolgenden Beispiel wird dem Elternelement eine Klasse zugeordnet. Dies kann in einer Applikation automatisch erfolgen. Zum Beispiel:

if ((beaufort) > 7) {
    $('#sturm-icon').addClass('icon-90');
} ...
Switch Class 40 90
Animated Storm Warning Icon Flashing orange light that pulsate 40 or 90 times per minute

Stylesheet


#sturm-icon > svg {
  max-width: 100%;
  height: auto;
}
#sturm-icon.icon-90 .storm-flash-class path {
  fill: #EB0000;
}
#sturm-icon.icon-40 #storm-flash path,
#sturm-icon.icon-40 #storm-circles path {
  fill: #FF7012;
}
#sturm-icon.icon-90 #storm-numbers path,
#sturm-icon.icon-40 #storm-numbers path {
  fill: #000000;
}
#sturm-icon.icon-90 #storm-inner-circle {
  stroke: #EB0000;
}
#sturm-icon.icon-40 #storm-inner-circle {
    stroke: #FF7012;
}
#sturm-icon.icon-90 #storm-inner-circle,
#sturm-icon.icon-40 #storm-inner-circle {
    fill: #FFCC1E;
}
#sturm-icon.icon-40 #storm-number-4 {
    display: block;
}
#sturm-icon.icon-40 #section-2-flash,
#sturm-icon.icon-40 #section-4-flash,
#sturm-icon.icon-40 #section-2-circle,
#sturm-icon.icon-40 #section-4-circle,
#sturm-icon.icon-40 #storm-number-9 {
  display: none;
}
#sturm-icon.icon-90 .storm-flash-class path {
  transform-origin: center center;
  animation: puls-flash 666ms linear infinite;
}
#sturm-icon.icon-40 .storm-flash-class path {
  transform-origin: center center;
  animation: puls-flash 1500ms linear infinite;
}
#sturm-icon.icon-90  #storm-circles {
  transform-origin: center center;
  animation: pulse-circles 666ms ease-in-out infinite;
  animation-delay: 0ms;
}
#sturm-icon.icon-40  #storm-circles {
  transform-origin: center center;
  animation: pulse-circles 1500ms ease-in-out infinite;
  animation-delay: 0ms;
}
@keyframes puls-flash {
     0% {transform: scale(0.8);opacity: 0;}
     50% {opacity: 0.8;}
     70% {opacity: 1;}
     100% {transform: scale(1);opacity: 0;}
}
@keyframes pulse-circles {
     0% {transform: scale(0.8);opacity: 0;fill: white;}
     20% {opacity: 0.2;fill: #EB0000;}
     70% {opacity: 0.2;fill: #EB0000;}
     100% {transform: scale(1.2);fill: white;opacity: 0;}
}