Beispiel:SVG-transform-scale-2.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
<style>
svg {
--blue: #306f91;
--green: #8db243;
--red: #c32e04;
--yellow: #dfac20;
height: 80vh;
max-width:100%
}
ellipse {
fill: var(--yellow);
stroke: var(--blue);
stroke-width: 1;
}
text {
font-family:verdana;
font-size: 18px;
font-weight:bold;
fill: #666;
}
.axis {
stroke: #666;
}
</style>
<title>Skalierung mit transform="scale()"</title>
</head>
<body>
<h1>SVG - Skalierung mit transform="scale()"</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="var(--blue)" fill="none" />
</pattern>
</defs>
<rect x="-100" y="-100" width="800" height="500" fill="url(#grid)"></rect>
<path class="axis" d="M0,-100 v495" />
<path class="axis" d="M-100,0 h795" />
<circle r="4" fill="#c32e04"></circle>
<ellipse id="oval" cx="150" cy="75" rx="50" ry="20" />
<text x="125" y="20">Original</text>
<use href="#oval" transform="scale(2)" opacity=".5"/>
<text x="250" y="150">
scale(2)
</text>
<use href="#oval" transform="translate(-150,-75) scale(2)" opacity=".5"/>
<text x="-95" y="130">
"translate(-150,-75) scale(2)"
</text>
</svg>
</body>
</html>
