Untitled

100%

✓ Published0🌍 Public

Last edited Jul 2, 2023

Created on Jul 2, 2023

This example demonstrates how to dynamically size an SVG element based on the bounding box of a text label. The page creates a single horizontal line with a centered text annotation, then draws a rounded rectangle behind the text using the dimensions returned by `getBBox()`. The SVG’s width is updated to fit the text plus padding. The code relies on native DOM methods like `createElementNS` and DOM APIs such as `setAttribute` and `getBBox`, with no external visualization libraries.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Untitled

This example demonstrates how basic SVG shapes and CSS styling can be used to create a static composition. It shows circles, rectangles, lines, and a path arranged in groups, with some shapes using inline fill colors and others inheriting styles from a group transform. The code uses React to render SVG elements, with the `style.css` file applying strokes and stroke widths to the line and path elements. The SVG is scaled and translated to position the shapes within a fixed 960 by 900 viewport.

Bbl75d

76% match

Loading thumbnail…

Untitled

This example demonstrates basic SVG shape construction on a static HTML page, combining a diagonal line, a rounded rectangle, and a vibrant green circle within a translated group. The visualization labels the shapes as "Rectangle" and "Circle" using monospaced text, while a larger title announces "d3.js 学习 Day01" (D3.js Learning Day 01). The code relies on raw SVG elements—`line`, `rect`, `circle`, `g`, and `text`—styled with inline CSS and attributes like `transform`, `fill`, and `stroke`. No JavaScript libraries are imported; it is a pure HTML/CSS/SVG composition.

Jjexchan

75% match

Loading thumbnail…

Untitled

This example shows a static SVG canvas containing a single blue rectangle with a thick black outline and a circle positioned near its upper-left corner. The HTML document defines the SVG element with explicit width and height attributes, then draws the shapes using basic SVG primitives. The rectangle uses incorrect attribute spellings ("heigth" and "stroke" instead of "height" and "stroke"), while the circle specifies its radius and center coordinates. The visualization demonstrates fundamental vector graphics rendering through raw SVG markup embedded directly in an HTML page without any external libraries or JavaScript.

CCK-Langat

75% match

Loading thumbnail…

SVG fundamentals

This example demonstrates fundamental SVG rendering and styling with a large, centered text message. The code uses an HTML page with embedded CSS to position and size the text, while JavaScript handles the SVG creation process. It provides a minimal starting point for understanding how visual elements are structured and styled, complemented by a reference to a React-based starter project for more advanced implementations.

NNishant Chauhan

75% match

Loading thumbnail…

Untitled

Two overlapping rectangles outline the same group of text elements inside an SVG. The green rectangle shows the result of calling `getBBox()`, while the red rectangle shows `getBoundingClientRect()`, highlighting how these two DOM APIs differ in their coordinate systems. The background image is loaded via CSS from Unsplash. The visualization uses vanilla JavaScript to set rectangle attributes based on these API returns, with no external libraries.

RRSSBDAE

75% match

Loading thumbnail…

Untitled

This example displays 100 horizontal SVG rectangles stacked vertically, each rendered with varying heights and widths across the viewport. The code uses D3’s `select` method to append an SVG element to the body and sets its dimensions from `window.innerWidth` and `window.innerHeight`. Inside a loop, it creates each rectangle via `document.createElementNS`, setting attributes for positioning and size, and appends them directly to the SVG using `appendChild`. The visualization shows a striped pattern of bars without any interactivity or data binding.

Nnreinig3@gatech.edu

74% match

Loading thumbnail…

getBBox

This example demonstrates how to retrieve and display the bounding box of SVG text using the `getBBox()` method. A large text element reading "Hello, getBBox!" is rendered in the center of the canvas, and the code then calculates its exact bounding rectangle. A semi-transparent gray rectangle is drawn over that measured area, highlighting the precise dimensions and position of the text. The implementation uses D3 v3 to append the SVG elements and calls `text.node().getBBox()` to obtain the geometry, with styling applied via inline attributes.

Mmbostock

74% match

Loading thumbnail…

Untitled

This example demonstrates basic SVG shape drawing and text placement on an HTML page, with a blue background card labeled "Car" and a second canvas of geometric primitives. The visualization shows distinct shapes—circles, rectangles, and lines—each with specific fill colors and strokes, including a purple dashed-bordered circle and a black horizontal line. The code uses raw SVG elements such as `<circle>`, `<rect>`, `<line>`, and `<text>` directly in the markup, styled via external CSS. No JavaScript or data binding is used; the rendering is static SVG with hardcoded coordinates.

Hhuz20

74% match