Beispiel:ViewBox-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"> <style>
.svg-wrapper {
width: 80%; max-width: 750px;
height: 550px;
resize: both; overflow: auto; border: thin dotted steelblue;
}
svg {
display: block; width: 100%; aspect-ratio: 650 / 450; }
} path {
stroke: black; stroke-width: 1;
}
pattern path {
stroke:#57c4ff; fill:none;
}
</style> <title>Ein responsives SVG</title>
</head>
<body>
<svg viewBox="0 0 650 450" preserveAspectRatio="xMidYMid meet">
<pattern id="grid" patternUnits="userSpaceOnUse" width="10" height="10" x="0" y="0"> <desc>Raster</desc> <path d="M0,0 v10 h10" />
</pattern>
<rect x="0" y="0" width="650" height="450" fill="url(#grid)"></rect> <path fill="#93b946" d="M20,20 h300 v100 h-100 v100 h-200 z" /> <path fill="#c82f04" d="M320,20 h200 v200 h-200 z" /> <path fill="gold" d="M220,120 h100 v100 h100 v100 h-100 v100 h-100 z" /> <path fill="steelBlue" d="M420,220 h200 v100 h-100 v100 h-200 v-100 h100 z" />
</svg>
</body> </html>
