Skip to content

Instantly share code, notes, and snippets.

@zanarmstrong

zanarmstrong/README.md

Created November 7, 2015 20:16
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 zanarmstrong/6ce2e4373b3c8d7acac7 to your computer and use it in GitHub Desktop.
Save zanarmstrong/6ce2e4373b3c8d7acac7 to your computer and use it in GitHub Desktop.
Download ZIP
Text Along a Path
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#curve-text {
font: 40px sans-serif;
}
#curve-line {
stroke: #999;
fill: none;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script>
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
.attr("viewBox", "0 0 1000 300");
svg.append("defs").append("path")
.attr("id", "curve")
.attr("d", "xxxxx");
svg.append("text")
.attr("id", "curve-text")
.append("textPath")
.attr("xlink:href", "#curve")
.text("We go up, then we go down, then up again.");
svg.append("use")
.attr("id", "curve-line")
.attr("xlink:href", "#curve");
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment