Skip to main content
SimilarExport ZIP
100%

Fun with <text>

✓ Published0🌍 Public
HHerst
Last edited Dec 23, 2017
Created on Sep 16, 2017

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.

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.

A improved version can be found at https://bl.ocks.org/Herst/d5db2d3d1ea51a8ab8740e22ebaa16aa.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Fun with &lt;text&gt;

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.

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

SVG Funndamentals

This example demonstrates basic SVG shapes by drawing circles, lines, and text directly in an HTML document. It shows how to set fill and stroke properties, including a hollow circle with a thick green outline and a circle with no fill. The rendering relies on the SVG API embedded in the page’s markup, using elements like `<circle>`, `<line>`, and `<text>`. The shapes are hardcoded with static coordinates and colors, receiving no data input or interactivity.

Rrune@noergaard.dk
72% 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
72% match
Loading thumbnail…

Text with d3

This example demonstrates how to add text to an SVG visualization using D3.js within a React framework. It shows both a static SVG text element in the HTML and a dynamically inserted text node created through D3’s selection and append methods. The code uses `d3.select()` to target the body, chains `.append('svg')` and `.append('text')` to build the structure, and applies `.attr()` and `.style()` for positioning and orange fill color. The rendered SVG measures 600 by 100 pixels, with text placed at the bottom-left corner.

AAlina Sul
72% 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
72% match