A demonstration of SVG’s textPath element.
forked from mbostock's block: Text Along a Path
A demonstration of SVG’s textPath element.
forked from mbostock's block: Text Along a Path
<!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> |