Beispiel:SVG-viewbox-4.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 {
background: white; border: thin dotted #337799; width: 96%; height: 450px; padding: 0; }
path {
stroke: black; stroke-width: 1;
}
pattern path {
stroke:#57c4ff; fill:none;
} .skalierender-svg-container {
position: relative; height: 0; width: 100%; padding: 0; padding-bottom: 100%; /* override this inline for aspect ratio other than square */
} .skalierendes-svg {
position: absolute; height: 100%; width: 100%; left: 0; top: 0;
}
</style> <title>Beispiel: Ubongo responsiv</title>
</head>
<body>
Beispiel: Ubongo responsiv
Mit padding-bottom height fix
<svg class="skalierendes-svg"
viewBox="0 0 700 500">
<defs>
<pattern id="grid" patternUnits="userSpaceOnUse" width="10" height="10" x="0" y="0">
<desc>Raster</desc>
<path d="M0,0 v10 h10" />
</pattern>
</defs>
<rect x="0" y="0" width="700" height="500" fill="url(#grid)"></rect>
<path fill="#5a9900" d="M20,20 h300 v100 h-100 v100 h-200 z" />
<path fill="#c32e04" d="M320,20 h200 v200 h-200 z" />
<path fill="#dfac20" d="M220,120 h100 v100 h100 v100 h-100 v100 h-100 z" />
<path fill="#3983ab" d="M420,220 h200 v100 h-100 v100 h-200 v-100 h100 z" />
</svg>
</body> </html>
