sabrina2017
Neues Mitglied
Schönen guten Abend!
Ich habe einen HTML Code für ein Diagramm für meine Webseite und würde dies aber gerne animieren, so dass sich beim Öffnen der Seite die Balken nach rechts bewegen, wenn die Zahl erreicht ist.
Oje, ich hoffe, das war einigermaßen zu verstehen....
Hier der Code den ich habe:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>SVG Diagramm</title>
</head>
<body>
<style type="text/css">
#statSvg{background-image:url('svg-rasterlinie.jpeg');}
#statSvg rect{opacity: 0.9;}
#statSvg rect:hover{opacity: 0.6;}
</style>
<svg id="statSvg" xmlns="http://www.w3.org/2000/svg" width="421" height="151">
<text x="10" y="50" font-size="12" font-family="Arial" fill="#404040">200</text>
<rect x="50" y="35" width="200" height="20" rx="3" ry="3" fill="#2A7BB4" />
<text x="10" y="80" font-size="12" font-family="Arial" fill="#404040">280</text>
<rect x="50" y="65" width="280" height="20" rx="3" ry="3" fill="#2A7BB4" />
<text x="10" y="110" font-size="12" font-family="Arial" fill="#404040">90</text>
<rect x="50" y="95" width="90" height="20" rx="3" ry="3" fill="#B4472A" />
<line x1="51" y1="10" x2="51" y2="140" stroke-width="2" stroke="#808080" />
</svg>
</body>
Vielen Dank schon mal im Voraus,
Sabrina
Ich habe einen HTML Code für ein Diagramm für meine Webseite und würde dies aber gerne animieren, so dass sich beim Öffnen der Seite die Balken nach rechts bewegen, wenn die Zahl erreicht ist.
Oje, ich hoffe, das war einigermaßen zu verstehen....
Hier der Code den ich habe:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>SVG Diagramm</title>
</head>
<body>
<style type="text/css">
#statSvg{background-image:url('svg-rasterlinie.jpeg');}
#statSvg rect{opacity: 0.9;}
#statSvg rect:hover{opacity: 0.6;}
</style>
<svg id="statSvg" xmlns="http://www.w3.org/2000/svg" width="421" height="151">
<text x="10" y="50" font-size="12" font-family="Arial" fill="#404040">200</text>
<rect x="50" y="35" width="200" height="20" rx="3" ry="3" fill="#2A7BB4" />
<text x="10" y="80" font-size="12" font-family="Arial" fill="#404040">280</text>
<rect x="50" y="65" width="280" height="20" rx="3" ry="3" fill="#2A7BB4" />
<text x="10" y="110" font-size="12" font-family="Arial" fill="#404040">90</text>
<rect x="50" y="95" width="90" height="20" rx="3" ry="3" fill="#B4472A" />
<line x1="51" y1="10" x2="51" y2="140" stroke-width="2" stroke="#808080" />
</svg>
</body>
Vielen Dank schon mal im Voraus,
Sabrina
. Wie oder wo gebe ich den Code in meinen ein?