xxxxxxxxxx
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Arvo"
rel="stylesheet"
type="text/css"
/>
<style>
html {
font-family: "Arvo", serif;
}
text {
font-size: 2em;
}
path {
fill: none;
stroke: tomato;
stroke-dasharray: 5, 5;
}
#letters {
padding: 10px;
width: 960px;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<input
type="text"
id="letters"
value="This is text is generated using textPath"
/>
<a
href="https://stackoverflow.com/users/7430694/chandrakant-thakkar"
style="position: absolute;top: 87%;left: 77%;"
target="_blank"
>
<img
src="https://stackoverflow.com/users/flair/7430694.png"
width="208"
height="58"
alt="profile for Chandrakant Thakkar at Stack Overflow, Q&A for professional and enthusiast programmers"
title="profile for Chandrakant Thakkar at Stack Overflow, Q&A for professional and enthusiast programmers"
/>
</a>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var width = 960,
height = 500;
var line = d3.line().curve(d3.curveBasis);
var input = d3.select("input").on("input", changeLetters);
var letters = input.node().value;
var startingPath = getStartingPath();
var svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.call(
d3
.drag()
.container(function(d) {
return this;
})
// .subject(function(d) { var p = [d3.event.x, d3.event.y]; return [p, p]; })
.on("start", dragStarted)
);
var textPath = svg
.append("defs")
.append("path")
.attr("id", "textPath")
.attr("d", startingPath);
var path = svg.append("path").attr("d", startingPath);
var text = svg
.append("text")
.append("textPath")
.attr("xlink:href", "#textPath")
.text(letters);
function changeLetters() {
letters = input.node().value;
text.text(letters);
}
function dragStarted() {
var x0 = d3.event.x,
y0 = d3.event.y;
var d = [
[x0, y0],
[x0, y0]
];
path.datum(d);
textPath.datum(d);
d3.event.on("drag", function() {
var x1 = d3.event.x,
y1 = d3.event.y,
dx = x1 - x0,
dy = y1 - y0;
d.push([(x0 = x1), (y0 = y1)]);
textPath.attr("d", line);
path.attr("d", line);
});
}
function getStartingPath() {
return "M480,250 m-150, 0 a150,150 0 1,0 300,0 a150,150 0 1,0 -300,0Z";
}
</script>
</body>
</html>
https://d3js.org/d3.v4.min.js