js操作svg实现整体缩放

100%

js操作svg实现整体缩放

✓ Published0🌍 Public

Last edited May 7, 2020

Created on May 5, 2020

This example demonstrates how to zoom an entire SVG scene using JavaScript, with a grid background and a red circle as the visual content. The zoom function updates the `transform` attribute of a group element containing the circle and grid, scaling it by a factor of 1.1 or 0.9 via buttons. The grid is dynamically drawn using SVG elements created with `document.createElementNS`, and the scaling applies to all grouped elements uniformly. It uses the native DOM API for SVG manipulation, without external libraries.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

javascript svg

This example generates a full-screen SVG visualization using the browser’s native Document Object Model (DOM) APIs. It creates 100 vertical rectangles, each 10 pixels wide and spaced 20 pixels apart, spanning the full height of the window. The rectangles are appended to an SVG element created via `document.createElementNS`, with dimensions set from `window.innerWidth` and `window.innerHeight`. The code runs directly in an HTML page with no external libraries, demonstrating a simple programmatic approach to SVG rendering in a React-hosted environment.

CCosmosDude1

74% match

Loading thumbnail…

SVG with CSS

This example demonstrates how CSS and JavaScript can style and transform SVG shapes directly in an HTML page. It renders circles, rectangles, lines, and a path inside an SVG element, using the `fill`, `stroke`, and `transform` attributes to control color and layout. The code applies CSS via an external stylesheet and structures the scene with nested `<g>` groups, including one with a `scale(1.7)` transform and another with a `translate` offset. The approach shows static, declarative SVG rendering without any external visualization libraries, relying solely on native web APIs.

Nnoor987

74% match

Loading thumbnail…

SVG Semantic Zooming

SVG semantic zooming applies a zoom transform to the positions of 2,000 circles generated with d3.randomNormal, while keeping their radius constant. The example uses d3.zoom to listen for wheel and drag events, and each circle’s transform attribute is updated via a custom function that applies d3.event.transform to its datum coordinates. A transparent overlay rectangle captures pointer events, and the circles are rendered as SVG elements with a fixed radius of 2.5 pixels, demonstrating how semantic zoom scales positions without altering symbol size.

Mmbostock

73% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates foundational techniques for creating vector graphics using native SVG elements embedded in HTML. The page displays a grid of alternating blue and red rectangles, overlaid with white, blue, and red circles, and a large red stroked circle, all constructed with explicit SVG tags. The code uses CSS to define a transition effect on rectangle elements, which animates their properties, and a hover rule that is invalidly written with an equals sign instead of a colon. The rendering is fully client-side through the SVG specification, with no external JavaScript libraries involved.

Dd-schwabe

73% match

Loading thumbnail…

js-visualization

This example renders two sets of overlapping SVG rectangles—horizontal red stripes and alternating green vertical stripes—that are masked by circular cutouts to create a dynamic patterned display. The entire visualization rotates continuously via CSS animation. The code builds the SVG scene imperatively using the DOM API, creating masks, rectangles, and circles with `document.createElementNS`, while styling spins through keyframes defined in CSS.

GGusnaRWX

72% match

Loading thumbnail…

react zoom transition

This example demonstrates a zoomable React component that applies a D3 zoom behavior to any SVG content, shown here with a large “Hello, World!” text element. The `ZoomContainer` component uses `d3.zoom()` and its `zoom` event to capture the current transform, storing it in React state via `useState`, then applies that transform as `translate` and `scale` attributes on a `<g>` element. The `Stage` component provides the SVG context through React’s `Context` API, and the `useSvg` hook supplies the DOM node to D3.

AAnimesh Nautiyal

72% match

Loading thumbnail…

sol vanilla JS

This example uses SVG and JavaScript to create a circular viewport that reveals a grid of horizontal and vertical lines. The visualization dynamically builds SVG elements, using masks to carve a circular hole in the background and to clip the vertical stripes inside the circle. The code creates a mask for the horizontal lines, which span the entire window width, and a second mask for the vertical lines, which fill the circle’s height. The result is an optical illusion of intersecting lines, produced entirely with procedural DOM manipulation and CSS styling.

KKerim

72% match

Loading thumbnail…

Zoom Skeleton

This example demonstrates a zoomable SVG visualization built with React and D3, showing a simple text label that can be panned and scaled using the mouse wheel or drag gestures. The code fetches JSON data and performs data transformations with `d3.rollup` and `d3.filter`, though the rendered output remains minimal. The zoom behavior is implemented via `d3.zoom`, which updates a React state transform that is applied to a group element using SVG `transform` attributes. The visualization uses React hooks like `useState`, `useEffect`, and `useContext` to manage the SVG stage and zoom container, with D3’s event handling integrated through the `select` API.

Ppsabela

72% match