Gunnar Bittersmann: Projektdauer in Form eines Kreises

Beitrag lesen

SELF-Forum

Projektdauer in Form eines Kreises

Gunnar Bittersmann Homepage des Autors
– Informationen zu den Bewertungsregeln

@@Jnnbox:

Auf meiner Seite gibt es ein Bereich der nennt sich „Projektziel“ Bei 100% soll ein Kreis vollständig geschlossen sein, bei 50% nur halb usw.

Das passende HTML-Element dafür ist das progress-Element (das für AT auch schon die entsprechende Rolle zugewiesen bekommen hat).

Bei quadratischen Abmessungen sollte das progress-Element als Tortengrafik gerendert werden. (Firefox und IE 10 tun das noch nicht.)

Muss ich dafür jetzt 100 Grafiken erstellen oder lässt sich hier etwas dynamisches mit CSSS erstellen? Was mit ehrlich gesagt am liebsten wäre.

Nein, SVG (inline im HTML) wäre das Mittel der Wahl (wenn du nicht mit der Darstellung als Balkendiaramm leben kannst). Mit Fallback auf das progress-Element, dieses wiederum mit Fallback auf Text:

[code lang=php]<?php // $p ist der Anteil, liegt im Intervall [0, 1] ?> <body>   <svg viewBox="-1.1 -1.1 2.2 2.2" version="1.1" xmlns="http://www.w3.org/2000/svg">     <circle r="1"/> <?php if ($p > 0): ?>     <path d="M0,0 L0,-1 A1,1,0,<?= $p > .5 ? 1 : 0 ?>,1,<?= sin(2 * M_PI * $p) ?>,<?= -cos(2 * M_PI * $p) ?>z"/> <?php endif; ?>     <progress value="<?= $p ?>"><?= $p * 100 ?>%</progress>   </svg> </body>[/code]

Gestylt werden kann das so:

svg
{
	max-width: 100%;
	max-height: 100%;
}

circle
{
	stroke: gray;
	stroke-width: 0.05;
	fill: none;
}

path
{
	stroke: rebeccapurple;
	stroke-width: 0.05;
	fill: rebeccapurple;
}

So sieht’s aus.

LLAP

--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
Beitrag melden
–
Informationen zu den Bewertungsregeln