index : pan-zoom | |
SVG pan/zoom library. |
aboutsummaryrefslogtreecommitdiff |
diff options
Diffstat (limited to 'public/assets/images')
-rw-r--r-- | public/assets/images/41156165560-4438592e93-o.webp | bin | 585068 -> 0 bytes | |||
-rw-r--r-- | public/assets/images/image.svg | 20 |
2 files changed, 9 insertions, 11 deletions
diff --git a/public/assets/images/41156165560-4438592e93-o.webp b/public/assets/images/41156165560-4438592e93-o.webp Binary files differdeleted file mode 100644 index 2ad3fa4..0000000 --- a/public/assets/images/41156165560-4438592e93-o.webp +++ /dev/null diff --git a/public/assets/images/image.svg b/public/assets/images/image.svg index 29f9306..a823339 100644 --- a/public/assets/images/image.svg +++ b/public/assets/images/image.svg @@ -1,22 +1,20 @@ -<?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"> +<?xml version="1.0" standalone="yes"?> <svg viewBox="-200 -150 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <style> - svg { - overflow: hidden; - border: 1px solid silver; - transform: scale(0.9); - } - circle, rect { fill-opacity: 0.9; - filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, .5)); } </style> + + <g> + <circle id="pointer" cx="0" cy="0" r="5" fill="red" stroke="maroon"/> + </g> + <script type="text/javascript">//<![CDATA[ const svgns = 'http://www.w3.org/2000/svg', svg = document.querySelector('svg'), + group = svg.querySelector('g'), + pointerEl = svg.querySelector('#pointer'), { x: vbX, y: vbY, width: vbWidth, height: vbHeight } = svg.viewBox.baseVal, shapeCount = 100, @@ -103,6 +101,6 @@ [...Array(shapeCount)] .map(() => getRandomFillAndStrokeVals()) - .forEach(fillAndStrokeVal => svg.appendChild(getRandomShape(fillAndStrokeVal))); + .forEach(fillAndStrokeVal => pointerEl.before(getRandomShape(fillAndStrokeVal))); //]]></script> </svg> |