Beispiel:SVG-CSS-animation-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
  <style>
rect, line, path {
	stroke: black;
    stroke-width: 1;
}

#pinkSym rect {
    stroke: none;
    animation: rotation1 2s infinite linear;
}
#rot, #rot+line  {
    fill: #c82f04;
    animation: rotation1 2s infinite linear;
}
#gelb {
    fill: #dfac20; 
    animation: rotation1 2s infinite linear;
}
#blau {
    fill: #337599; 
    animation: rotation2 2s infinite linear;
}
#grün {
    fill: #93b946; 
    animation: rotation1 2s infinite linear;
}

@keyframes rotation1 {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes rotation2 {
	0% { transform: translate(150px, 30px) rotate(0deg); }
	100% { transform: translate(150px, 30px) rotate(360deg); }
}
  </style>
  <title>SVG mit CSS animieren - 2</title>
</head>
<body>
<h1>SVG mit CSS animieren - 2</h1>
<svg viewBox="-100 -100 600 200">
	<symbol id="pinkSym" viewBox="-2 -2 4 4" overflow="visible">
		<rect x="-2" y="-2" width="4" height="4" fill="pink" />
	</symbol>
	<path class="axis" d="M-200 0 h600 l-10 5 v-10 l10 5" />
	<text x=385 y=15>x</text>
	<path class="axis" d="M0 -100 v200 l-5 -10 h10 l-5 10" />
	<text x=-15 y=95>y</text>
        
	<use href="#pinkSym" width=30 height=30 x=100 y=-50 />
    
	<rect id="gelb" x="0" y="0" width="30" height="30" />
	
	<rect id="rot" x="60" y="30"  width="30" height="30" />
	<line stroke-dasharray="1,1" x1="0" y1="0" x2="75" y2="45" />

	<rect id="blau" x="-15" y="-15" width="30" height="30" />
	
	<rect id="grün" x="250" y="15"  width="30" height="30" transform-origin="265 30" />
</svg>

<p>Das <span style="background-color:#dfac2080;">gelbe</span> Quadrat hat seine linke obere Ecke im Koordinatenursprung, deshalb bleibt diese Ecke beim Rotieren im Ursprung liegen. Das <span style="background-color:#c82f0460;">rote</span> Quadrat liegt dagegen weit vom Koordinatenursprung entfernt und umkreist ihn deshalb von fern. Die Hilfslinie verdeutlicht das.</p>
<p>Das <span style="background-color:#33759940;">blaue</span> Quadrat hat seinen Mittelpunkt durch die X- und y-Koordinaten im Ursprung des SVG Koordinatensystems. Es verwendet die rotation2 Keyframes, die es erst nach der Rotation an den gewünschten Ort schieben.  Dadurch erscheint es so, als würde es sich am Punkt (250,100) um sich selbst drehen.</p>
<p>Das <span style="background-color:#93b94660;">grüne</span> Quadrat dagegen verwendet die gleichen Keyframes wie das rote und gelbe Quadrat, hat aber durch das transformation-origin Attribut den Transformationsursprung in seiner Mitte und dreht sich deshalb um sich selbst.</p>
<p>Das <span style="background-color:pink">pink-farbene</span> Quadrat ist Teil eines Symbols. Es verwendet ebenfalls die rotation1-Keyframes, umkreist aber nicht den Ursprung des SVG. Die Transformation bezieht sich auf den Ursprung der Symbol-Viewbox.</p></body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-CSS-animation-2.html&oldid=87897“