textLength, spacingandglyphs example

100%

textLength, spacingandglyphs example

✓ Published0🌍 Public

Last edited Jun 20, 2017

Created on Jun 20, 2017

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/696596b6cf8a7932884ad0ef72928f16'>text example</a>

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/8a2bcd867fccf7394c5c149e53b0d9e2'>transform, translate example</a>

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/e2fc6c90c9d38cc6ae19f6dda8759310'>transform, scale example</a>

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/87187327885c9f235217daa23e2f7a57'>transform, scale example</a>

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/4d951e9b64c4dd1ad021307864e8b124'>transform, scale example</a>

mit Licensed

Similar vizzes

Loading thumbnail…

text example

This example demonstrates basic SVG text placement and shape rendering using D3 v4. It positions three text elements with different anchor alignments (start, middle, end) along a horizontal line, showing how the `dx` and `text-anchor` attributes affect text positioning. A polyline traces a jagged path across the canvas, and a circular dot with a lime-green stroke and Indian Red fill uses CSS hover effects to expand its radius and stroke width. The visualization uses D3's selection methods to append elements to an SVG container, with styling applied through inline attributes and CSS classes.

335degrees

80% match

Loading thumbnail…

text example

This example demonstrates how SVG text elements can be positioned and anchored in different ways within a D3 v4 visualization. It shows three text strings placed at the same x-coordinate but with distinct text-anchor values (start, middle, end) and dx offsets, illustrating how alignment affects placement relative to the anchor point. The code also includes a simple circle with a CSS class that applies a hover effect, increasing its radius and stroke width. Using D3's selection and append methods, the visualization creates an SVG canvas and populates it with static text and a single interactive dot.

335degrees

77% match

Loading thumbnail…

transform, scale example

This example demonstrates how D3’s `transform` attribute applies scaling and rotation to SVG text. The text "that's the way" is positioned at (200,200), scaled by a factor of 3, and rotated 20 degrees, all within an SVG canvas. Two reference polylines cross at the text’s origin to highlight the transformation’s effect. The code uses D3 v4 to append the SVG, set attributes like `transform`, and style elements via CSS classes. Hover interactions on `.dot` elements are defined but unused here. The rendering is purely SVG, with no external data source.

335degrees

75% match

Loading thumbnail…

transform, scale example

This example demonstrates how SVG transform chaining applies scale and rotation to a text element relative to a fixed coordinate system. The code renders a single text label ("that's the way") positioned at the center of a canvas, with a green crosshair polyline marking the reference point. Using D3 v4, the script selects the body, appends an SVG container, and applies a transform attribute combining translate, scale, and rotate operations. The visual result shows the text enlarged and tilted around its anchor, while the polyline highlights the origin. The example relies on D3's selection and attribute methods, with SVG elements styled via CSS classes.

335degrees

73% match

Loading thumbnail…

text path example

This example demonstrates how to render text along curved SVG paths using D3 v4. Two dashed, tomato-colored paths are drawn on a light gray canvas, and each path serves as the baseline for a line of text. The text elements are anchored at the midpoint of their respective paths using `text-anchor: middle` and `startOffset: 50%`, with steel-blue fill from the CSS. The visualization shows how D3’s `d3.line()` with `curveBasis` can generate smooth, arbitrary paths, and how SVG's `<textPath>` reuses those paths to align text along the curves, illustrating a simple technique for creating curved typography.

EEE2dev

73% match

Loading thumbnail…

writing-mode

This example demonstrates the behavior of the SVG `writing-mode` attribute, which rotates text vertically along the y-axis, and compares it with the `glyph-orientation-vertical` attribute for controlling glyph orientation. It shows two vertical text labels, one relying solely on `writing-mode` and the other adding `glyph-orientation-vertical`, set against reference lines and stroke-cap style comparisons. Built with D3 v4, the visualization uses chained SVG elements—`text`, `polyline`, and `line`—to illustrate how text rotation interacts with graphic primitives. The code appends these shapes to an SVG container, styling them via inline attributes and CSS classes. The example serves as a low-level reference for text layout and stroke rendering in SVG.

335degrees

72% match

Loading thumbnail…

Text example

A single SVG text element renders the word "Hello" centered on a 960×500 canvas, demonstrating basic SVG text placement and styling. The text uses 72-pixel Share Tech font, loaded via Google Fonts, and is positioned using the `x="50%"` and `y="50%"` attributes. The minimal example shows how CSS sets the font family and hides overflow, while the SVG itself handles the centered layout without JavaScript or data binding.

Ggianlucaguerra

71% match

Loading thumbnail…

Dot Dot Dot Demo

This demo shows a single yellow ellipsis of three dots rendered as large, thick-stroked text on a plain white background, centered on a 500 by 300 SVG canvas. The text uses the `textLength` and `lengthAdjust` attributes to control exact spacing and glyph distribution. The example relies on native SVG presentation attributes, including `stroke`, `stroke-width`, and `paint-order`, to create the outlined effect. It demonstrates basic text rendering in an inline `<svg>` element without any external libraries or data sources.

HHerst

71% match