Polling SVG TEXT and TSPAN width

100%

Polling SVG TEXT and TSPAN width

✓ Published0🌍 Public

Last edited May 10, 2014

Created on May 9, 2014

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.

AI-generated description

Similar vizzes

Loading thumbnail…

CSSOM/SVG Test

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.

Mmbostock

66% match

Loading thumbnail…

getBoundingClientRect

This example demonstrates how to use the browser's `getBoundingClientRect` method to retrieve the exact screen-space bounding box of an SVG text element, and then draws a semi-transparent rectangle over that area. The text is positioned using a grouped `<g>` element with translation and scaling transforms, along with `dx` and `dy` offsets. The code uses D3 v3 to select and append SVG elements, computing the rectangle’s coordinates by subtracting the SVG’s own client rect from the text’s client rect. The final rectangle is styled with a gray fill and stroke, visually highlighting the text’s bounds.

PPhilippe Rivière

62% 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

62% match

Loading thumbnail…

Stroke fun waterfall

This visualization is a test harness for evaluating browser rendering oddities in SVG strokes and text. It displays a grid of waterfall-style test cases with varying text, stroke widths, font sizes, and opacity settings, all rendered using D3.js v4. The tool demonstrates differences between `paint-order` and double-painting techniques, as well as `geometricPrecision` and `spacingAndGlyphs` text-rendering options. Users can adjust parameters via a fixed control panel or URL query string to isolate specific rendering behaviors across different browser engines.

HHerst

61% match

Loading thumbnail…

textLength, spacingandglyphs example

This example demonstrates how SVG text can be stretched to a specified width using the `textLength` and `lengthAdjust` attributes, with `spacingAndGlyphs` adjusting both spacing and glyph shapes. A single line of text is rendered inside an SVG canvas and positioned via a `transform` that combines translation, scaling, and rotation. Two polylines cross at the origin to mark the reference point. The code uses D3 v4 to select the body, append the SVG, and add the text element, while the polylines are drawn with standard SVG attributes. The text is styled with a CSS class, though the hover effect on dots is not triggered here.

335degrees

60% match

Loading thumbnail…

test overflow

A short red sidebar hosts a vertical list of repeated French words, demonstrating how SVG text elements render beyond their container. The visualization uses D3 v4 to bind an array of string values to text elements inside a fixed-width SVG group, with each label positioned at increasing y-coordinates. The code explicitly sets the sidebar’s height to 100%, yet the appended texts overflow visually, showing that D3 does not clip or wrap text by default. This example illustrates basic data binding and manual text placement via the `attr` method without layout constraints.

BBrunoDumas

58% 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

58% match

Loading thumbnail…

SVG

This example demonstrates the difference between HTML and SVG rendering by displaying a large message using two distinct technologies. The page shows the text "Hello HTML!" styled with CSS inside a standard div element, while a script uses D3.js to construct an SVG container and render the same message as scalable vector graphics. The code relies on the D3 selection and append APIs to create SVG text elements, illustrating how browser-native HTML and declarative SVG both handle text display. The CSS class "message" controls font size and alignment, while the JavaScript portion works with the SVG namespace.

JJM-Koo

58% match