Beispiel:SVG-63-transform-skew.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-skewX=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>skewX - CSS vs SVG</title>
<style>
.original {
fill: #f2dea6;
stroke: #dfac20;
stroke-width: 1;
}
#textfeld {
animation: 4s infinite alternate zerren;
}
.css-rect {
fill: #fc9d82;
stroke: #c82f04;
stroke-width: 1;
}
@keyframes zerren {
from {
transform: skewX(0);
}
to {
transform: skewX(45deg);
}
}
.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 - skewX und SkewY<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>
<rect class="original" x="30" y="30" width="50" height="30" />
<g id="textfeld">
<rect class="css-rect" x="30" y="30" width="50" height="30" />
<text class="h2" x="35" y="50">CSS</text>
</g>
<g id="textfeld2" transform="skewY(40)">
<rect class="svg-rect" x="30" y="30" width="50" height="30" />
<text class="h2" x="35" y="50">SVG</text>
</g>
<text class="code" x="60" y="20">transform: skewX(20deg);</text>
<text class="code" x="60" y="135">transform="skewX(40)"</text>
</svg>
</body>
</html>