Beispiel:SVG-viewBox-zoom-1.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>
text {
font-family:verdana;
font-size: 12px;
}
.axis {
stroke: #999;
marker-end: url(#markerArrow);
}
svg {
height:400px;
}
</style>
<title>Zoom & Pan mit der viewBox</title>
</head>
<body>
<svg viewBox="0 0 800 400">
<defs>
<pattern id="grid" patternUnits="userSpaceOnUse" width="10" height="10" x="0" y="0">
<path d="M0,0 v10 h10" stroke="#306f91" fill="none" />
</pattern>
<marker id="markerArrow" markerWidth="130" markerHeight="13" refx="2" refy="6" orient="auto">
<path d="M0,2 l8,4 l-8,4" fill="none" stroke="#999" stroke-width="1"/>
</marker>
<linearGradient id="linear-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="20%" style="stop-color:#dfac20;" />
<stop offset="80%" style="stop-color:#306f91" />
</linearGradient>
</defs>
<rect x="0" y="0" width="800" height="400" fill="url(#grid)"></rect>
<g stroke="#000" fill="#FFF" transform="translate(90,90)">
<rect x="0" y="0" width="100" height="100" fill="url(#linear-gradient)"/>
<path d="M0,0 l100,100 m-100,0 l100,-100"/>
</g>
<g>
<path class="axis" d="M200,400 v-395"/>
<path class="axis" d="M0,200 h695"/>
<circle cx="200" cy="200" r="4" fill="#c32e04"></circle>
<text x="210" y="220" fill="darkslategray">(200,200)</text>
</g>
<animate
attributeName="viewBox"
begin="1s"
dur="10s"
values=" 0 0 800 400;
130 130 330 230;
0 0 800 400;
-300 -300 1300 500;
0 0 800 400"
fill="freeze"/>
</svg>
</body>
</html>
