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>

SVG-Rect - Um den Ursprung zentriert

<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>

Alle Rechtecke und Ellipsen sind um den Ursprung zentriert.

Sie erhalten mit custom properties einheitliche Maße und Koordinaten, die erst im Regelsatz in die abweichenden Geometrie-Attribute eingesetzt werden.

So ist eine Rotation oder Stauchung problemlos möglich; ein Drehpunkt muss nicht berechnet werden!

</body> </html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-transform-rotate-3.html&oldid=100170“