Skip to main content
SimilarExport ZIP
100%

Fun with <text>

✓ Published0🌍 Public
HHerst
Last edited Dec 30, 2020
Created on Nov 1, 2017

This demo shows three different SVG techniques for giving `<text>` elements a white outline so they remain readable on varied backgrounds: two stacked text elements with a thick stroke, one text element using the `paint-order` attribute, and a `<filter>` with `feMorphology`, `feColorMatrix`, and `feMerge` effects. A dark green backdrop provides contrast. The D3 v4 code includes zooming and panning via `d3.zoom`, and interactive controls adjust font size, stroke width, rotation, and other text properties. Users can set initial camera position and parameters through URL search parameters.

AI-generated description

If one wants to give a SVG <text> an outline effect, e.g. so it can be displayed on many different backgrounds (any color, dark, bright, patterns…), there are various approaches. In this demo three are shown (the first two are very similar though):

  • Example 1: Two <text> elements, the one with white thick stroke behind the other one.

  • Example 2: Similar to the previous example only here is only one <text> element and instead the paint-order attribute is used so the stroke is painted behing the fill. This attribute is not part of SVG 1.1 though and not supported by browsers such as Internet Explorer 11 or Microsoft Edge (as of EdgeHTML version 15).

  • Example 3: A <filter> with multiple filter effects merged inside in order to achieve the effect.

Panning/Zooming on the map is possible (e.g. using the mouse).

Additionally, there are various controls to test the behaviors especially in very dynamic applications.

A link can be created to start at a certain camera position or with certain default values. How to do it is left as an exercise to the reader.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Fun with &lt;text&gt;

This example demonstrates three different SVG techniques for adding a white outline to text so it remains legible over any background. The first uses two stacked `<text>` elements, the second relies on the `paint-order` attribute, and the third applies a `<filter>` with `feMorphology`, `feColorMatrix`, and `feMerge`. The map is interactive with d3.zoom for panning and zooming, and controls adjust font size, stroke width, rotation, and other text properties.

HHerst
95% match
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…

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
76% match
Loading thumbnail…

text label test

This visualization demonstrates six distinct techniques for making text labels readable when placed on top of colored bars. It compares plain labels against those with background rectangles, SVG filters, paint-order strokes, and CSS text shadows, using black, blue, red, and yellow bars as backdrops. Built with D3 v5 and rendered as SVG, the example leverages SVG filter primitives like `feFlood` and `feComposite`, as well as CSS `text-shadow` and the `paint-order` property to enhance legibility. The code includes no data binding and is purely a static test of label styling approaches.

EEE2dev
75% match
Loading thumbnail…

Testing

This example demonstrates a static SVG visualization with a single text element displaying a placeholder message. The code uses the D3.js v4 library to select the body element, append an SVG canvas, and add text at a specified position with custom font styling. While the visualization currently shows only a simple text label, the structure suggests it serves as a starting template for building more complex data-driven graphics. The rendering approach relies on SVG elements created programmatically through D3’s selection and manipulation methods, with no external data source or interactive behavior implemented.

CCJKraenzle
74% match
Loading thumbnail…

Some fun with SVG

A static SVG scene demonstrates primitive shapes without data binding. A blue outlined circle, a thick blue diagonal line, and a navy rectangle are positioned explicitly on a 1024x768 canvas. The page also uses the D3 v7 `select` API to insert the text "Hello D3@7" into the body. This example highlights hand-coded SVG markup rather than programmatic generation, with all geometry defined in the HTML file.

GGiuseppe
74% 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
74% match