| index : pan-zoom | |
| SVG pan/zoom library. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-04-12 10:57:15 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-04-15 09:48:00 -0700 |
| commit | 263201d869956b94660d4efa8297e89dadbe36a8 (patch) | |
| tree | 8fa47922163548dda0739aaa5ff0612de96c9fd1 /public | |
Initial commit
Diffstat (limited to 'public')
| -rw-r--r-- | public/image.svg | 82 | ||||
| -rw-r--r-- | public/index.html | 33 |
2 files changed, 115 insertions, 0 deletions
diff --git a/public/image.svg b/public/image.svg new file mode 100644 index 0000000..5a5c3d9 --- /dev/null +++ b/public/image.svg @@ -0,0 +1,82 @@ +<?xml version="1.0" standalone="no"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" + "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<svg viewBox="0 0 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <style> + svg { + overflow: hidden; + } + + circle, rect { + fill-opacity: 0.9; + } + </style> + <script type="text/javascript">//<![CDATA[ + const svgns = 'http://www.w3.org/2000/svg', + svg = document.querySelector('svg'), + { width: vbWidth, height: vbHeight } = svg.viewBox.baseVal, + shapeCount = 100, + maxColorValue = 256, + circleRadius = { max: 45, min: 5 }, + rectSideLength = { max: 95, min: 5 }; + + function getRandomInt(max) { + return Math.floor(Math.random() * max); + } + + function getRandomPositiveInt(max) { + return getRandomInt(max) + 1; + } + + function getRandomFillAndStrokeVals() { + const shadeFactor = Math.random(), + fill = ['r', 'g', 'b'].map(() => getRandomInt(maxColorValue)), + stroke = fill.map(v => Math.floor(v * shadeFactor)); + + return { + fill: fill, + stroke: stroke + }; + } + + function getRandomCircle(fill, stroke) { + const el = document.createElementNS(svgns, 'circle'), + r = getRandomPositiveInt(circleRadius.max) + circleRadius.min; + + el.setAttributeNS(null, 'cx', getRandomInt(vbWidth)); + el.setAttributeNS(null, 'cy', getRandomInt(vbHeight)); + el.setAttributeNS(null, 'r', r); + el.setAttributeNS(null, 'fill', fill); + el.setAttributeNS(null, 'stroke', stroke); + + return el; + } + + function getRandomRect(fill, stroke) { + const el = document.createElementNS(svgns, 'rect'), + [width, height] = ['w', 'h'].map(() => + getRandomPositiveInt(rectSideLength.max) + rectSideLength.min + ); + + el.setAttributeNS(null, 'x', getRandomInt(vbWidth)); + el.setAttributeNS(null, 'y', getRandomInt(vbHeight)); + el.setAttributeNS(null, 'width', width); + el.setAttributeNS(null, 'height', height); + el.setAttributeNS(null, 'fill', fill); + el.setAttributeNS(null, 'stroke', stroke); + + return el; + } + + function getRandomShape({ fill: fillVals, stroke: strokeVals }) { + const shapes = [getRandomCircle, getRandomRect], + [fill, stroke] = [fillVals, strokeVals].map(v => `rgb(${v.join(', ')})`); + + return shapes[getRandomInt(shapes.length)](fill, stroke); + } + + [...Array(shapeCount)] + .map(() => getRandomFillAndStrokeVals()) + .forEach(fillAndStrokeVal => svg.appendChild(getRandomShape(fillAndStrokeVal))); + //]]></script> +</svg> diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..8040421 --- /dev/null +++ b/public/index.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <meta name="viewport" content="width=device-width, initial-scale=1.0"/> + <title>SVG Pan & Zoom Example</title> + <style> + body { + text-align: center; + max-width: 100vw; + } + + object { + max-height: 400px; + max-width: 100%; + background-color: lightsteelblue; + border: 1px solid steelblue; + touch-action: none; + } + </style> + </head> + <body> + <h1>Pan & Zoom an SVG Image with JavaScript</h1> + + <p> + Click and drag on the image to pan. Use the mouse wheel + to zoom in and out. + </p> + + <object type="image/svg+xml" data="image.svg"></object> + <script src="app.js"></script> + </body> +</html> |
