interaktives und sich selbst updatendes SVG

Datum
28.04.2021

Dieses SVG lädt immer die neusten Artikel von meinem Blog. Damit wäre es möglich Infografiken zu gestalten, die immer die aktuellen Werte haben.

Man kann es runterladen und lokal öffnen, das SVG verbindet sich dann mit meinem Blog und lädt die Daten.

Beispiel

Inital lädt das SVG die neusten Artikel und nach den click auf den Button die älteren.

download SVG

Code

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 595.28 841.89" style="enable-background:new 0 0 595.28 841.89;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
	.st1{fill:#020203;}
	.st2{fill:none;}
	.st3{font-family:'MyriadPro-Regular';}
	.st4{font-size:12px;}
	.st5{fill:#F39200;}
</style>
<rect class="st0" width="595.28" height="841.89"/>
<g>
	<g>
		<path class="st1" d="M306.2,36.53v-0.04H191.63v0.05c-23.45,0.96-42.18,20.26-42.18,43.95s18.72,43,42.18,43.96v0.01h0.33
			c0.49,0.02,0.99,0.04,1.49,0.04s0.99-0.02,1.49-0.04h108.03c0.49,0.02,0.99,0.04,1.49,0.04s0.99-0.02,1.49-0.04h0.26v-0.01
			c23.49-0.92,42.25-20.24,42.25-43.96C348.45,56.78,329.69,37.46,306.2,36.53z M305.11,113.49c-18.22,0-33-14.77-33-33
			c0-18.22,14.78-33,33-33c18.23,0,33,14.78,33,33C338.12,98.71,323.34,113.49,305.11,113.49z"/>
	</g>
	<g>
		<path class="st1" d="M71.3,124.43V36.51h30.79c10.67,0,18.76,2.04,24.27,6.13c5.52,4.09,8.27,10.07,8.27,17.96
			c0,4.31-1.11,8.1-3.32,11.38c-2.21,3.28-5.29,5.69-9.24,7.22c4.51,1.13,8.06,3.4,10.66,6.82c2.6,3.42,3.89,7.61,3.89,12.56
			c0,8.45-2.7,14.85-8.09,19.2c-5.39,4.35-13.08,6.56-23.07,6.64H71.3V124.43z M89.41,73.35h13.4c9.14-0.16,13.71-3.8,13.71-10.93
			c0-3.99-1.16-6.85-3.47-8.6s-5.97-2.63-10.96-2.63H89.41V73.35z M89.41,86.15v23.73h15.52c4.27,0,7.6-1.02,9.99-3.05
			c2.39-2.03,3.59-4.84,3.59-8.42c0-8.05-4.17-12.14-12.5-12.26C106.01,86.15,89.41,86.15,89.41,86.15z"/>
	</g>
	<g>
		<path class="st1" d="M382.6,109.88h38.46v14.55h-56.58V36.51h18.12V109.88z"/>
	</g>
	<g>
		<path class="st1" d="M451.49,124.49h-18.12V36.58h18.12V124.49z"/>
	</g>
	<g>
		<path class="st1" d="M517.94,86.4h-34.78v23.55h40.82v14.55h-58.94V36.58h58.81v14.67h-40.7v20.95h34.78v14.2H517.94z"/>
	</g>
</g>
<rect x="70" y="157" class="st2" width="454" height="624"/>
<text transform="matrix(1 0 0 1 70 165.52)">
  <tspan x="0" y="0" class="st3 st4" id="title">neuste Artikel:</tspan>
  <tspan x="0" y="15" class="st3 st4" id="article1"></tspan>
  <tspan x="0" y="25" class="st3 st4" id="article2"></tspan>
  <tspan x="0" y="35" class="st3 st4" id="article3"></tspan>
  <tspan x="0" y="45" class="st3 st4" id="article4"></tspan>
  <tspan x="0" y="55" class="st3 st4" id="article5"></tspan>
</text>
  <script type="text/javascript"><![CDATA[
  function loadnew() {
    page++;
    var url = "https://boolie.org/wp-json/wp/v2/posts/?per_page=5&page="+page;
	const Http = new XMLHttpRequest();
Http.open("GET", url);
Http.send();
var title = document.getElementById("title");
Http.onreadystatechange = (e) => {
  var content = JSON.parse(Http.responseText);
  title.textContent = "Seite: "+page;
  article1.textContent = content[0].link;
  article2.textContent = content[1].link;
  article3.textContent = content[2].link;
  article4.textContent = content[3].link;
  article5.textContent = content[4].link;
}
  }
  ]]></script>
<rect x="130" y="745" class="st5" width="340" height="58" onclick="loadnew()"/>
<rect x="130" y="768" class="st2" width="340" height="35"/>
<text transform="matrix(1 0 0 1 252.9009 776.5195)" class="st3 st4" id="loadArticle" onclick="loadnew()">älteren Artikel laden</text>
  <script type="text/javascript"><![CDATA[
    var page = 1;
    var url = "https://boolie.org/wp-json/wp/v2/posts/?per_page=5&page="+page;
	const Http = new XMLHttpRequest();
Http.open("GET", url);
Http.send();

var article1 = document.getElementById("article1");
var article2 = document.getElementById("article2");
var article3 = document.getElementById("article3");
var article4 = document.getElementById("article4");
var article5 = document.getElementById("article5");

Http.onreadystatechange = (e) => {
  var content = JSON.parse(Http.responseText);
  article1.textContent = content[0].link;
  article2.textContent = content[1].link;
  article3.textContent = content[2].link;
  article4.textContent = content[3].link;
  article5.textContent = content[4].link;
}
  ]]></script>
</svg>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kommentare anschauen
Boolie Startseite öffnen folge Boolie auf Twitter folge Boolie auf Instagram
Kommentare (0)
sehr gutes Webhosting Manitu
Cookies erleichtern die Bereitstellung unserer Dienste. Mit der Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies verwenden.
Ok mehr Informationen