Skip to content

Instantly share code, notes, and snippets.

@Herst

Herst/.block

Last active December 23, 2017 15:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Herst/cea785948891831cee238861735492d0 to your computer and use it in GitHub Desktop.
Save Herst/cea785948891831cee238861735492d0 to your computer and use it in GitHub Desktop.
Download ZIP
Outline for <text> and various experiments with it
Raw
.block
license: gpl-3.0
height: 600
scrolling: yes
Raw
README.md

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.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fun with &lt;text&gt;</title>
<style>
svg {
background-color: darkgreen;
width: 100%;
height: 300px;
overflow: hidden;
}
</style>
</head>
<body lang="en">
<svg>
<defs>
<filter id="whiteOutlineEffect" width="200%" height="200%" x="-50%" y="-50%">
<feMorphology in="SourceAlpha" result="MORPH" operator="dilate" radius="1" />
<feColorMatrix in="MORPH" result="WHITENED" type="matrix" values="-1 0 0 1 0, 0 -1 0 1 0, 0 0 -1 1 0, 0 0 0 1 0" />
<feMerge>
<feMergeNode in="WHITENED" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
</svg>
<fieldset>
<label for="fontSize">Font Size [<code>&amp;fontSize=</code>]</label>
<input type="number" id="fontSize" step="1" min="1" max="99">
</fieldset>
<fieldset>
<label for="strokeWidth">Stroke Width (Examples 1 and 2) [<code>&amp;strokeWidth=</code>]</label>
<input type="number" id="strokeWidth" step="0.2" min="0" max="20">
</fieldset>
<fieldset>
<label for="radius">Radius (Example 3) [<code>&amp;radius=</code>]</label>
<input type="number" id="radius" step="1" min="0" max="20">
</fieldset>
<fieldset>
<label for="textRendering">Text Rendering [<code>&amp;text-rendering=</code>]</label>
<select id="textRendering">
<option selected>auto</option>
<option>optimizeSpeed</option>
<option>optimizeLegibility</option>
<option>geometricPrecision</option>
</select>
</fieldset>
<fieldset>
<label for="rotation">Rotation [<code>&amp;rotation=</code>]</label>
<input type="number" id="rotation" step="3" min="0" max="360">
</fieldset>
<fieldset>
<label for="fontFamily">Font Family [<code>&amp;fontFamily=</code>]</label>
<input type="text" list="genericFamilies" id="fontFamily">
<datalist id="genericFamilies">
<option>serif</option>
<option>sans-serif</option>
<option>monospace</option>
<option>cursive</option>
<option>fantasy</option>
<option>system-ui</option>
</datalist>
</fieldset>
<fieldset>
<label for="strokeLineCap">Stroke Line Cap [<code>&amp;strokeLineCap=</code>]</label>
<select id="strokeLineCap">
<option value="" selected>&nbsp;</option>
<option>butt</option>
<option>round</option>
<option>square</option>
</select>
</fieldset>
<fieldset>
<label for="strokeLineJoin">Stroke Line Join [<code>&amp;strokeLineJoin=</code>]</label>
<select id="strokeLineJoin">
<option value="" selected>&nbsp;</option>
<option>miter</option>
<option>round</option>
<option>bevel</option>
</select>
</fieldset>
<p>[<code id="position"></code>]</p>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://cdn.rawgit.com/jerrybendy/url-search-params-polyfill/357fd6bf/index.js"></script>
<script>
"use strict";
var settings = {
fontSize: 35,
strokeWidth: 2,
radius: 1,
textRendering: "auto",
rotation: 0,
fontFamily: null,
strokeLineCap: null,
strokeLineJoin: null
};
var urlSearch = document.location.search || parent.document.location.search;
var searchParams = new URLSearchParams(urlSearch);
for (var key in settings) {
if (!settings.hasOwnProperty(key)) {
continue;
}
if (searchParams.has(key)) {
settings[key] = searchParams.get(key);
}
document.getElementById(key).value = settings[key] !== null ? settings[key] : "";
}
var svg = d3.select("svg");
var outerG = svg.append("g");
var g = outerG.append("g");
var feMorphology = d3.select("#whiteOutlineEffect feMorphology");
var position = document.getElementById("position");
function zoomed() {
outerG.attr("transform", d3.event.transform);
position.innerHTML = [
"x=" + d3.event.transform.x.toFixed(3),
"y=" + d3.event.transform.y.toFixed(3),
"k=" + d3.event.transform.k.toFixed(3)
].join("&");
}
var zoom = d3.zoom()
.scaleExtent([1 / 8, 8])
.on("zoom", zoomed);
svg.call(zoom);
if (searchParams.has("x") && searchParams.has("y") && searchParams.has("k")) {
svg
.transition()
.duration(800)
.call(
zoom.transform,
d3.zoomIdentity
.translate(searchParams.get("x"), searchParams.get("y"))
.scale(searchParams.get("k"))
);
}
var example1 = g.append("g").attr("transform", "translate(200,30)");
var ex1OutlineText = example1.append("text")
.attr("id", "ex1OutlineText")
.attr("stroke", "white")
.attr("fill", "none")
.attr("text-anchor", "middle")
.attr("alignment-baseline", "middle")
.text("Example 1 (dual)");
var ex1Text = example1.append("text")
.attr("id", "ex1Text")
.attr("text-anchor", "middle")
.attr("alignment-baseline", "middle")
.text("Example 1 (dual)");
var example2 = g.append("g").attr("transform", "translate(200,100)");
var ex2Text = example2.append("text")
.attr("id", "ex2Text")
.attr("stroke", "white")
.attr("paint-order", "stroke")
.attr("text-anchor", "middle")
.attr("alignment-baseline", "middle")
.text("Example 2 (paint-order)");
var example3 = g.append("g").attr("transform", "translate(200,170)");
example3.attr("filter", "url(#whiteOutlineEffect)");
var ex3Text = example3.append("text")
.attr("id", "ex3Text")
.attr("text-anchor", "middle")
.attr("alignment-baseline", "middle")
.text("Example 3 (filter)");
function update() {
feMorphology.attr("radius", settings.radius);
g.attr("transform", settings.rotation ? "rotate(" + settings.rotation + ")" : null);
ex1OutlineText
.attr("stroke-width", settings.strokeWidth)
.attr("stroke-linecap", settings.strokeLineCap)
.attr("stroke-linejoin", settings.strokeLineJoin)
.attr("font-size", settings.fontSize)
.attr("font-family", settings.fontFamily)
.attr("text-rendering", settings.textRendering);
ex1Text
.attr("stroke-linecap", settings.strokeLineCap)
.attr("stroke-linejoin", settings.strokeLineJoin)
.attr("font-size", settings.fontSize)
.attr("font-family", settings.fontFamily)
.attr("text-rendering", settings.textRendering);
ex2Text
.attr("stroke-width", settings.strokeWidth)
.attr("stroke-linecap", settings.strokeLineCap)
.attr("stroke-linejoin", settings.strokeLineJoin)
.attr("font-size", settings.fontSize)
.attr("font-family", settings.fontFamily)
.attr("text-rendering", settings.textRendering);
ex3Text
.attr("stroke-linecap", settings.strokeLineCap)
.attr("stroke-linejoin", settings.strokeLineJoin)
.attr("font-size", settings.fontSize)
.attr("font-family", settings.fontFamily)
.attr("text-rendering", settings.textRendering);
}
update();
d3.select("#fontSize").on("change input keyup", function () {
settings.fontSize = this.value || null;
update();
});
d3.select("#strokeWidth").on("change input keyup", function () {
settings.strokeWidth = this.value || null;
update();
});
d3.select("#radius").on("change input keyup", function () {
settings.radius = this.value || 0;
update();
});
d3.select("#textRendering").on("change input", function () {
settings.textRendering = this.value || null;
update();
});
d3.select("#rotation").on("change input keyup", function () {
settings.rotation = this.value || 0;
update();
});
d3.select("#fontFamily").on("change input keyup", function () {
settings.fontFamily = this.value || null;
update();
});
d3.select("#strokeLineCap").on("change input keyup", function () {
settings.strokeLineCap = this.value || null;
update();
});
d3.select("#strokeLineJoin").on("change input keyup", function () {
settings.strokeLineJoin = this.value || null;
update();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment