Position any kind of elements on SVG Curves

Question

I want to position elements on along an SVG curve. I found that we can use textpath to position text along the path of an SVG can we do the same with list-elements? If so how to achieve that functionality

Html for positioning text along an SVG

CSS for the same - Just makes it look nice

body {
  background-color: #333;
  font-family: 'Luckiest Guy', cursive;
  font-size: 40px;
}

path {
  fill: transparent;
}

text {
  fill: #FF9800;
}

body {
  background-color: #333;
  font-family: 'Luckiest Guy', cursive;
  font-size: 40px;
}

path {
  fill: transparent;
}

text {
  fill: #FF9800;
}

Can I achieve this functionality for other elements? list elements for example

Note: My final objective is to position small circles (filled) along the curve that are equally spaced.

I'm not very well versed with CSS so if you could point me to resources that will help me achieve this functionality I'll be very grateful

Thanks in Advance

user_1292848 · Answer

You can't do what you want with CSS.

You'll need to use some Javascript. Here's a little example where you can adjust the number of circles, and they will be spaced out evenly along the total length of the path.

let countField = document.getElementById("count");


function updateCircles()
{
   let n = countField.value;
   // Find the curve path element
   let curve = document.getElementById("curve");
   // Get the total length of the path
   let curveLength = curve.getTotalLength();
   // Calculate the spacing between the circles
   let spacing = curveLength / (n - 1);
   
   let svg = curve.ownerSVGElement;
   // Remove any existing circles
   let oldCircles = svg.querySelectorAll("circle");
   oldCircles.forEach(oldCircle => svg.removeChild(oldCircle));
   
   // Add the n new circles
   for (var i = 0; i < n; i++)
   {
      // Get the x,y position of a point x along the path
      let coords = curve.getPointAtLength(i * spacing);
      // Make a circle
      let circle = document.createElementNS(svg.namespaceURI, "circle");
      circle.cx.baseVal.value = coords.x;
      circle.cy.baseVal.value = coords.y;
      circle.r.baseVal.value = 6;
      // Append it to the SVG
      svg.appendChild(circle);
   }
}


// Update the circles at the start to show the initial set of circles
updateCircles();
// Update the circles whenever the input changes
countField.addEventListener("input", updateCircles);

path {
  fill: none;
  stroke: linen;
}

circle {
  fill: rgba(0,0,0, 0.5);
}

user_271353 · Answer

You can't place shapes arbitrarily along a path in SVG using just CSS. Your choices here are:

Don't use a shape, use a text element with tabs and circle characters instead ( e.g. Unicode circle (U+23FA)) and change the font-color to whatever you want
Use a marker - but placement of these is set to the start, middle & end of each curve segment (marker tutorial)
Use javascript (e.g. pointAtLength) to calculate the locations of points along a path that you would like to draw circles and set the cx, cy of your circles to those points.

user_7394871 · Answer

Note: My final objective is to position small circles (filled) along the curve that are equally spaced.

textPath is used to place text along a curve. But you can use Unicode characters instead of text characters.

By using textPath and placing unicode characters inside

⚫ tags, you can easily place as many circles as you like on one curve.

Here is a link to the unicode characters of the various circles.

Unicode characters can be styled - fill =" red ", resized - font-size =" 32px " set the distance between circles dx =" 10 "

Another example that mimics the chain using unicode characters
Added animation of chain links movement

Position any kind of elements on SVG Curves

Html for positioning text along an SVG

CSS for the same - Just makes it look nice

3 Answers