Beispiel:SVG-transform-rotate-3.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-rotate=1.0">
	<title>rotate - um den Urprung zentriert</title>
<style>
.rect-zentriert {
	x:     calc(-0.5 * var(--width));
	y:      calc(-0.5 * var(--height)); 
	width:  var(--width); 
  height: var(--height);
  translate: calc(var(--x) + (0.5 * var(--width))) calc(var(--y) + (0.5 * var(--height)));
}

.oval-zentriert {
	cx: 0;
	cy: 0; 
	rx: calc(0.5 * var(--width)); 
  ry: calc(0.5 * var(--height));
  translate: var(--x) var(--y);
}
.original{
  --x: 0; /* gewünschte Position, spätere Verschiebung */
  --y: 0;	
  --width:  50px;      /* dimensionslose Einheiten */
  --height: 30px;
}

.blau {
  --x: 200px; /* gewünschte Position, spätere Verschiebung */
  --y: 50px;
  --width:  50px;      /* dimensionslose Einheiten */
  --height: 50px;
}

.rot {
  --width:  80px;      /* dimensionslose Einheiten */
  --height: 50px;
  --x: 60px; /* gewünschte Position, spätere Verschiebung */
  --y: 100px;
}
.original {
	fill: #f2dea6;
	stroke: var(--yellow);
	stroke-width: 1;
}

.rot {
	animation: 4s infinite turning;
	fill: #fc9d82;
	stroke: var(--red); //#c82f04;
	stroke-width: 1;	
}
.blau {
	animation: 4s infinite turning;
	fill: var(--blue2);
	stroke: var(--blue); 
	stroke-width: 2;	
}

@keyframes turning {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(1turn);
	}
}

.gruen {
	fill: #bed590;
	stroke: var(--green);
	stroke-width: 1;	
  --x: 250px; /* gewünschte Position, spätere Verschiebung */
  --y: 150px;
  --width:  90px;      /* dimensionslose Einheiten */
  --height: 30px;	
	animation: 4s infinite turning;	
	animation-direction: reverse;
}

.h2 {
	font-size: 18px;
	font-weight: bold;
	font-family: sans-serif;	
}

.code {
	font-size: 12px;
	font-family: monospace;
}

svg {
	--blue: #337599;
	--blue2: hsl(201 50% 75%);
	--green: #8db243;
	--red: #c82f04;
	--yellow: #dfac20;
	border: thin dotted var(--blue);
}
.axis {
	stroke: #666;
}

body {
  max-width: 50em;
}

</style>
</head>
<body>
<h1>SVG-Rect - Um den Ursprung zentriert</h1>

<svg viewBox="-100 -100 500 300">
	<defs>
		<pattern id="grid" patternUnits="userSpaceOnUse" width="10" height="10" x="0" y="0">
			<path d="M0,0 v10 h10" stroke="#337599" stroke-width=".5" fill="none" /> 
		</pattern>
	</defs>
	<rect x="-100" y="-100" width="600" height="400" fill="url(#grid)"/>
	<path class="axis" d="M0,-100 v495" />
	<path class="axis" d="M-100,0 h795" />
	<circle r="4" fill="var(--red)"></circle>	

	<rect class="original rect-zentriert " />
		<rect class="rot rect-zentriert " />
		<rect class="blau rect-zentriert " />	
		<rect class="rot rect-zentriert " />
		<ellipse class="gruen oval-zentriert " />				
		<text class="h2" x="-80" y="-25">Original</text>
		<text class="code" x="25" y="-85">.original {</text>
		<text class="code" x="40" y="-70">--x: 0;</text>		
		<text class="code" x="40" y="-55">--y: 0;</text>	
		<text class="code" x="40" y="-40">--width: 50px;</text>	
		<text class="code" x="40" y="-25">--height: 30px;</text>	
		<text class="code" x="25" y="-10">}</text>											

	</svg>
<p>Alle Rechtecke und Ellipsen sind um den Ursprung zentriert.</p>
<p>Sie erhalten mit <em>custom properties</em> einheitliche Maße und Koordinaten, die erst im Regelsatz in die abweichenden Geometrie-Attribute eingesetzt werden.</p>
<p>So ist eine Rotation oder Stauchung problemlos möglich; ein Drehpunkt muss nicht berechnet werden!</p>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-transform-rotate-3.html&oldid=100170“