const pathSVG = d3
.select("body")
.append("svg")
.attr("width", 791.558)
.attr("height", 104.254);
pathSVG.append("path")
.attr("id", "one") //Unique id of the path
.attr("d", "M-5723-3100.181s26.431,4.927,103.481-16.125c0,0,116.022-38.969,215.919-9.854,0,0,112.888,31.354,150.517,27.323,0,0,60.028.9,143.8-23.292,0,0,85.26-34.489,177.843,21.344v66.9L-5723-3032.707Z") //SVG path
.style("fill", "#fff4e4")
.attr("transform", `translate(5723, 3136.961)`);
pathSVG.append("text")
.attr("x", 6)
.attr("dy", 20)
.append("textPath")
.attr("xlink:href", "#one")
.style("text-anchor", "start")
.text("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry");
Here instead of text, continuous circles should be coming, how we can achieve this?
Here is a simple Cubic Bezier (4 points) example:
const points = [{x: 0, y: 100}, {x: 100, y: 0}, {x: 200, y: 200}, {x: 300, y: 100}]; const cbPoint = t => { const x = points[0].x * t * t * t + points[1].x * 3 * t * t * (1 - t) + points[2].x * 3 * t * (1 - t) * (1 - t) + points[3].x * (1 - t) * (1 - t) * (1 - t); const y = points[0].y * t * t * t + points[1].y * 3 * t * t * (1 - t) + points[2].y * 3 * t * (1 - t) * (1 - t) + points[3].y * (1 - t) * (1 - t) * (1 - t); return {x, y}; } const RADIUS = 7; const OFFSET = 25; const WAVES = 2; const svg = d3.select('svg'); const path = `M ${points[0].x},${points[0].y} C ${points[1].x},${points[1].y} ${points[2].x},${points[2].y} ${points[3].x},${points[3].y}`; for (let index = 0; index < WAVES; index++) { const g = svg.append('g'); g.attr('transform', `translate(${50 + index * 300}, 0)`); g.append('path').attr('d', path).style('fill', 'none').style('stroke', 'black'); for (let t = 0; t < 1; t += 0.1) { const {x, y} = cbPoint(t); g.append('circle') .attr('r', RADIUS) .attr('cx', x) .attr('cy', y + OFFSET) } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <svg width="700" height="200" > </svg>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.