Beispiel:SVG-61-transform-rotate.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">
	<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
	<title>rotate - CSS vs SVG</title>
<style>
.original {
	fill: #f2dea6;
	stroke: #dfac20;
	stroke-width: 1;
}

.css-rect {
	animation: 4s infinite turning;
	fill: #fc9d82;
	stroke: #c82f04;
	stroke-width: 1;	
}

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

.svg-rect {
	fill: #bed590;
	stroke: #586f2a;
	stroke-width: 1;	
}

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

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

svg {
	--blue: #3375999;
	--green: #8db243;
	--red: #c82f04;
	--yellow: #dfac20;
	border: thin dotted var(--blue);
	height: 80vh;
	max-width: 100%
}
.axis {
	stroke: #666;
}

</style>
</head>
<body>
<h1>CSS vs SVG - rotate-<br>transform-Eigenschaft und transform-Attribut</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" 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>	

	<ellipse class="css-rect" cx="50" cy="0" rx="40" ry="25" />
	<ellipse class="original" cx="50" cy="0" rx="40" ry="25" />

		<rect class="original" x="50" y="50" width="90" height="60" />
		<rect class="svg-rect" x="50" y="50" width="90" height="60" transform="rotate(20)" />
		<text class="h2" x="50" y="70">Original</text>
		<text class="h2" x="15" y="10">Original</text>		
		<text class="h2" x="110" y="140">SVG</text>		
		<text class="code" x="90" y="20">transform: rotate(20deg);</text>
		<text class="h2" x="90" y="-5">CSS</text>				
		<text class="code" x="110" y="160">transform="rotate(20)"</text>
	</svg>
<p>Wie Sie besonders bei der Drehung des Ovals sehen, wird als Drehpunkt der Ursprung des SVG-Koordinatensystems genommen.</p>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-61-transform-rotate.html&oldid=87954“