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>
Marc Borkowski Portait
Autor: Marc Borkowski

Moin,
mein Name ist Marc Borkowski. Ich bin in Berlin geboren und habe mich in eine ruhigere Stadt verkrümelt, Wismar. Ich habe mehrere Jahre Erfahrung im Bereich Frontend und bin ausgebildeter Mediengestalter. Aktuell entwickle ich mich zu einem Techlead und werde hier meine Erfahrungen mit euch teilen.

Kontakt

E-Mail: moin@boolie.org | Über mich Seite

Instagram logoLinkedIn LogoYouTube Logo

Schreibe einen Kommentar

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

Kommentare (0)
klimabewusste Website