index : pan-zoom | |
SVG pan/zoom library. |
aboutsummaryrefslogtreecommitdiff |
diff options
author | Catalin Mititiuc <webdevcat@proton.me> | 2024-06-11 14:58:29 -0700 |
---|---|---|
committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-06-11 15:09:41 -0700 |
commit | 9c34e15c47cf3578adeff41693a62061a25fdcde (patch) | |
tree | fed30aa9d385c5be893f5715791837583d480350 /public/assets/images | |
parent | 2d3fc1cd22ffcc61ec178eeaf97f3a4d7cba98bf (diff) |
Update implementation to account for WebKit bugv0.2.0
getScreenCTM() on WebKit does not reflect transformations applied to an ancestor (see bug https://bugs.webkit.org/show_bug.cgi?id=209220), so instead of transforming the root <svg> element, we can only transform a child element
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> |