Skip to main content
SimilarExport ZIP
100%

CSSOM/SVG Test

✓ Published0🌍 Public
Mmbostock
Last edited Feb 8, 2016
Created on Sep 21, 2010

This example tests how WebKit handles SVG bounding-box measurements by comparing three different API results for a single rectangle. It uses a plain SVG `rect` element with percentage-based dimensions inside an HTML page, then displays the reported sizes from `getBBox()`, `getBoundingClientRect()`, and `getClientRects()[0]` as text rows. The expected dimensions are computed from the viewport and shown alongside, making it easy to spot discrepancies between the SVG specification and CSSOM implementations. The code directly manipulates the DOM with `createElementNS` and relies on native browser geometry methods, with no external libraries.

AI-generated description
gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Tests

This example demonstrates basic SVG shapes rendered on an HTML page using CSS and JavaScript. It shows a circle, a rectangle with a red fill and black stroke, and a group containing a line and a path, all displayed within an SVG element of 960 by 500 pixels. The code uses plain SVG APIs for drawing and CSS for styling, with the `.lines` class applying stroke properties to the line and path. The page loads from `index.html` with linked `styles.css`, providing a minimal setup for testing SVG rendering without any external libraries.

XXavier Bost
70% match
Loading thumbnail…

SVG Tests HTML/CSS/SVG

A set of static SVG shapes demonstrates the effects of CSS and SVG transforms. Circles, rectangles, and a line are drawn directly in the markup, some with explicit fills and strokes, while a surrounding group applies a non-uniform scale. A nested group uses translation and rotation, with inherited stroke properties and a lightgreen fill. The page loads a linked stylesheet that resets the body margin and hides overflow, affecting the canvas presentation. No JavaScript or interactions are present.

LLuiz Domingues
68% match
Loading thumbnail…

SVG Fundamentals test

This example demonstrates fundamental SVG rendering through a static, self-contained HTML page. It creates two concentric circle shapes using raw SVG path elements with cubic Bézier curves, styled with red strokes and fills at varying opacity levels. The visualization also includes nested transformation groups and a clip path definition, showcasing how SVG handles coordinate transformations and shape clipping. The code relies entirely on native SVG APIs within the HTML markup—no JavaScript libraries or data sources are used—making it a minimal test of vector graphics capabilities in the browser.

GGMEirik
68% match
Loading thumbnail…

SVG FILE TESTER

This example demonstrates how an SVG file can be loaded and embedded into an HTML page. It uses D3’s `xml()` function to fetch an external SVG file, retrieves the document element, and adjusts its `viewBox` and dimensions to fit a specified height while preserving the aspect ratio. The modified SVG is then appended to the page body. The visualization also includes a static red cross-hatch pattern from the source file, rendered using standard SVG elements.

Aadventuresenglish.info@gmail.com
67% 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
67% match
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
67% match
Loading thumbnail…

SVG TEST

This example demonstrates the basic building blocks of SVG graphics on a plain HTML page. It shows how to create and style two circles and a rectangle using inline SVG elements, with one circle left unfilled and the other filled red. The rectangle uses a blue stroke with a width of 10 and no fill. The code exercises fundamental SVG attributes such as `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` within a fixed 200 by 200 coordinate system. No external libraries or data are involved; the visualization relies entirely on hand-written markup.

Bbtkg
67% match
Loading thumbnail…

Polling SVG TEXT and TSPAN width

This example compares how different browsers measure SVG text and tspan elements. It uses a table to display results from three APIs: getBBox(), getBoundingClientRect(), and getComputedTextLength(), applied to four elements in a small inline SVG. The code, written in plain JavaScript, reveals that Internet Explorer and Firefox throw errors when calling getBBox on a tspan, while Chrome and Safari return widths, though getBoundingClientRect can produce inconsistent results across browsers for text elements. The visualization is a simple diagnostic tool rather than a data-driven chart.

MMSCAU
66% match