在 SVG 曲线上放置任何类型的元素

Question

我想沿着 SVG 曲线放置元素。我发现我们可以用来textpath沿着pathSVG 定位文本，我们可以对列表元素做同样的事情吗？如果是的话如何实现该功能

用于沿 SVG 定位文本的 Html

<svg viewBox="0 0 425 300">
    <path id="curve"
        d="M6,150C49.63,93,105.79,36.65,156.2,47.55,207.89,58.74,213,131.91,264,150c40.67,14.43,108.57-6.91,229-145" />
    <text x="25">
        <textPath xlink:href="#curve">
            This text is now curved
        </textPath>
    </text>
</svg>

CSS 相同 - 只是让它看起来不错

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

path {
  fill: transparent;
}

text {
  fill: #FF9800;
}  

<svg viewBox="0 0 425 300">
    <path id="curve"
        d="M6,150C49.63,93,105.79,36.65,156.2,47.55,207.89,58.74,213,131.91,264,150c40.67,14.43,108.57-6.91,229-145" />
    <text x="25">
        <textPath xlink:href="#curve">
            This text is now curved
        </textPath>
    </text>
</svg>

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

path {
  fill: transparent;
}

text {
  fill: #FF9800;
}  

我可以为其他元素实现此功能吗？例如列出元素

注意：我的最终目标是沿着曲线放置等距的小圆圈（实心）。

我不太熟悉 CSS，所以如果您能给我指出可以帮助我实现此功能的资源，我将非常感激

提前致谢

Answer 1

你不能用 CSS 做你想做的事。

您需要使用一些 JavaScript。这是一个小示例，您可以调整圆圈的数量，它们将沿着路径的总长度均匀分布。

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);
}

<svg viewBox="0 0 500 160">
    <path id="curve"
        d="M6,150C49.63,93,105.79,36.65,156.2,47.55,207.89,58.74,213,131.91,264,150c40.67,14.43,108.57-6.91,229-145" />
</svg>


<input type="range" id="count" value="4" min="3" max="32"/>