<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1" baseProfile="full"
    viewBox="0 0 800 450">
  <desc>

  <style>
    .small { font: bold 23px sans-serif; }
    .heavy { font: bold 50px sans-serif; }
    .headline { font: bold 70px sans-serif; }
    .big { font: bold 180px sans-serif; }
    .sub { font: bold 40px sans-serif; }


    /* Note that the color of the text is set with the    *
     * fill property, the color property is for HTML only */
    .Rrrrr { font: italic 40px serif; fill: red; }
  </style>

  </desc>
  <title>SVG Beispiel</title>

<rect x="10" y="70" width="180" height="180" style="fill:rgb(16,147,229)" />
<rect x="210" y="70" width="180" height="180" style="fill:rgb(16,147,229)" />
<rect x="410" y="70" width="180" height="180" style="fill:rgb(16,147,229)" />
<rect x="610" y="70" width="180" height="180" style="fill:rgb(16,147,229)" />

<line x1="100" y1="330" x2="100" y2="370" style="stroke:rgb(0,0,0);stroke-width:4" />
<line x1="300" y1="330" x2="300" y2="370" style="stroke:rgb(0,0,0);stroke-width:4" />
<line x1="500" y1="330" x2="500" y2="370" style="stroke:rgb(0,0,0);stroke-width:4" />
<line x1="700" y1="330" x2="700" y2="370" style="stroke:rgb(0,0,0);stroke-width:4" />




<image x="10" y="50" width="220" height="220" xlink:href="../media/wetter_icons/test123.svg" class="weather" />
<image x="210" y="50" width="230" height="220" xlink:href="../media/wetter_icons/cloudy-day-1.svg" class="weather" />
<image x="410" y="50" width="230" height="220" xlink:href="../media/wetter_icons/cloudy-day-1.svg" class="weather" />
<image x="610" y="50" width="230" height="220" xlink:href="../media/wetter_icons/snowy-5.svg" class="weather" />

<text fill="black" x="40" y="50" class="heavy">heute</text>

<text fill="black" x="300" y="50" class="heavy" text-anchor="middle"> <tspan data-value="tag2"></tspan></text>
<text fill="black" x="500" y="50" class="heavy" text-anchor="middle"> <tspan data-value="tag3"></tspan></text>
<text fill="black" x="700" y="50" class="heavy" text-anchor="middle"> <tspan data-value="tag4"></tspan></text>

<text fill="black" x="100" y="275" class="small" text-anchor="middle"> <tspan data-value="text11"></tspan></text>
<text fill="black" x="100" y="300" class="small" text-anchor="middle"> <tspan data-value="text12"></tspan></text>
<text fill="black" x="100" y="325" class="small" text-anchor="middle"> <tspan data-value="text13"></tspan></text>

<text fill="black" x="300" y="275" class="small" text-anchor="middle"> <tspan data-value="text21"></tspan></text>
<text fill="black" x="300" y="300" class="small" text-anchor="middle"> <tspan data-value="text22"></tspan></text>
<text fill="black" x="300" y="325" class="small" text-anchor="middle"> <tspan data-value="text23"></tspan></text>

<text fill="black" x="500" y="275" class="small" text-anchor="middle"> <tspan data-value="text31"></tspan></text>
<text fill="black" x="500" y="300" class="small" text-anchor="middle"> <tspan data-value="text32"></tspan></text>
<text fill="black" x="500" y="325" class="small" text-anchor="middle"> <tspan data-value="text33"></tspan></text>

<text fill="black" x="700" y="275" class="small" text-anchor="middle"> <tspan data-value="text41"></tspan></text>
<text fill="black" x="700" y="300" class="small" text-anchor="middle"> <tspan data-value="text42"></tspan></text>
<text fill="black" x="700" y="325" class="small" text-anchor="middle"> <tspan data-value="text43"></tspan></text>




<text fill="blue" x="60" y="364" class="sub" text-anchor="middle"><tspan data-value="low1"></tspan>°</text>
<text fill="blue" x="260" y="364" class="sub" text-anchor="middle"><tspan data-value="low2"></tspan>°</text>
<text fill="blue" x="460" y="364" class="sub" text-anchor="middle"><tspan data-value="low3"></tspan>°</text>
<text fill="blue" x="660" y="364" class="sub" text-anchor="middle"><tspan data-value="low4"></tspan>°</text>


<text fill="red" x="140" y="364" class="sub" text-anchor="middle"><tspan data-value="high1"></tspan>°</text>
<text fill="red" x="340" y="364" class="sub" text-anchor="middle"><tspan data-value="high2"></tspan>°</text>
<text fill="red" x="540" y="364" class="sub" text-anchor="middle"><tspan data-value="high3"></tspan>°</text>
<text fill="red" x="740" y="364" class="sub" text-anchor="middle"><tspan data-value="high4"></tspan>°</text>








  <desc>
    <script><![CDATA[
      "use strict";

// What are the URLs for the images?
var weatherNameImageMap = {
  "rainsnow": "../media/wetter_icons/snowy-5.svg",
  "cloudy": "../media/wetter_icons/cloudy-day-1.svg",
  "404": "../media/wetter_icons/test123.svg"
};

function update(x){
      // Get all image elements with the weather class
      let weatherimages = Array.from(document.querySelectorAll("image.weather"));

      // Set the xlink:href attribute of each image to the url for the image or to the "404" image if there is no url for that image specified in weatherNameImageMap 
      weatherimages[0].setAttributeNS( document.lookupNamespaceURI("xlink"), "xlink:href", weatherNameImageMap[x.icon1] || weatherNameImageMap["404"]);
      weatherimages[1].setAttributeNS( document.lookupNamespaceURI("xlink"), "xlink:href", weatherNameImageMap[x.icon2] || weatherNameImageMap["404"]);
      weatherimages[2].setAttributeNS( document.lookupNamespaceURI("xlink"), "xlink:href", weatherNameImageMap[x.icon3] || weatherNameImageMap["404"]);
      weatherimages[3].setAttributeNS( document.lookupNamespaceURI("xlink"), "xlink:href", weatherNameImageMap[x.icon4] || weatherNameImageMap["404"]);
  
      // For all elements with a data-value attribute
      for(var e of Array.from(document.querySelectorAll("[data-value]"))){        

          // Check if it has a data-value attribute
          if(!e.dataset || !('value' in e.dataset))
            continue; // If not, check next text element
          let prop = e.dataset.value; // get the value of the data-value attribute
          // Do our datas have a property with the same name as the data-value attributes' value?
          if(!prop || !(prop in x))
            continue; // If not, check next text element
          // Otherwise, get the value of that property and use it as text for the text element
          e.textContent = x[prop] || '';
        }
      }
      function poll(){ // Function which loads data, and then calls the update function
        fetch("../data/wetter.json")
          .then(response=>response.json())
          .then(data=>update(data));
      }
      poll(); // Load data
      setInterval(poll, 1000 * 5); // Load data again every 5 seconds
    ]]></script>
  </desc>
</svg>
