Beispiel:SVG-transform-rotate-2.html
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-rotate=1.0"> <title>rotate - CSS vs SVG - 2</title> <style> .original { fill: #f2dea6; stroke: var(--yellow); stroke-width: 1; }
.css-rect { animation: 4s infinite turning; fill: #fc9d82; stroke: var(--red); //#c82f04; stroke-width: 1; transform-origin: 50px 0; }
@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); } .axis { stroke: #666; }
body {
max-width: 50em;
}
</style> </head>
<body>CSS vs SVG - rotate -
Drehpunkt festlegen
<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>
<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, 50, 50)" /> <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="code" x="90" y="40">transform-origin: 50px 0;</text> <text class="h2" x="90" y="-5">CSS</text> <text class="code" x="110" y="160">transform="rotate(20, 50, 50)"</text> </svg>
Als Drehpunkt werden die x- und y-Werte verwendet. Während dies bei Kreisen und Ellipsen der Mittelpunkt ist, ist es bei Rechtecken die linke, obere Ecke.
</body> </html>
