Javascript 在SVG路径上实现Div对象

我在Adobe Illustrator中创建了一个路径，并将其导出为SVG文件格式

现在我想在路径上实现Div对象（如圆），如下图示例中路径上的红色圆

我很难找到一个方法来做，如何实施

带有路径数据的SVG代码

<div id="pathContainer">

<svg version="1.1" id="Layer_4" 
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
    x="0px" y="0px" width="595.28px" height="841.89px" viewBox="0 0 595.28 841.89">
<path id="mypath" fill="#FFFFFF" stroke="#F8AC9F" stroke-miterlimit="10" d="M69.429,102.762c2.263,36.997,58.704,58.47,88.784,65.713
    c19.589,4.717,39.793,11.051,60.021,14.076c10.453,1.563,22.682,4.897,33.469,6.587c11.255,1.764,29.514,5.776,39.318,10.37
    c17.331,8.12,22.596,9.282,37.004,23.227c13.816,13.372,25.66,26.868,35.48,42.861c9.006,14.666,15.848,39.245,11.516,56.912
    c-2.432,9.909-7.213,17.709-12.668,26.667c-5.334,8.761-10.809,15.063-18.789,22.9c-27.559,27.059-55.625,50.187-87.197,72.35
    c-21.464,15.067-39.252,25.385-59.68,40.083c-15.355,11.049-31.639,19.25-44.786,32.567c-16.653,16.869-34.092,33.209-45.895,53.156
    c-11.456,19.361-13.994,42.143-15.15,64.67c-1.134,22.102,2.479,49.279,10.719,68.785c8.602,20.363,41.511,43.985,62.445,48.948
    c33.333,7.902,67.076,2.607,102.762-17.765c22.238-12.695,38.158-30.369,47.905-56.362c10-26.666,13.074-46.31,13.074-75.808
    c0-25.195-1.361-50.486,11.578-71.688c10.111-16.566,26.264-33.844,43.184-43.961c38.639-23.104,101.459-42.234,135.48,1.689
    c11.123,14.357,17.521,37.84,21.662,55.891c4.545,19.811,9.758,42.936,10.711,62.9c0.923,19.324,5.623,39.801,2.29,57.801
    c-1.801,9.725-9.001,31.001-15.334,38.334c-7.562,8.756-45,37.667-60.333,45"/>
</svg>

</div>

图像示例

---

您需要使用一些Javascript。幸运的是，SVG DOM提供了一个函数，允许您获取路径上点n的位置：

var point = mypath.getPointAtLength(n);

因此，一旦有了对路径的引用，就可以使用绝对定位沿路径定位元素

pathOnDiv("1", 0.1);

function pathOnDiv(text, pos)
{
   // Get the coordinates of the point that is the fraction 'pos' along the path
   var  path = document.getElementById("mypath");
   var  pathLength = path.getTotalLength();
   var  loc = path.getPointAtLength(pos * pathLength);

   // Make a div
   var div = document.createElement("div");
   div.textContent = text;
   div.setAttribute("class", "pathDiv");
   div.style.left = loc.x + "px";
   div.style.top = loc.y + "px";
   document.body.appendChild(div);
}

请注意，这是一个相当简单的演示。例如，它假设：

SVG位于窗口的左上角

SVG未按比例缩放（即，比例为1:1）

如果这些假设不正确，则需要稍微修改代码

要更正假设#1，您需要通过在页面上添加SVG的左偏移量和上偏移量来调整div的位置

还有一些方法可以纠正假设2

更新

纠正假设1的一个简单方法是将

和路径div包装在容器div中。如果您给出该div

位置：relative

，那么您在其中放置的任何路径div都将正确定位，并且您无需担心调整div位置以进行偏移

---

这里的关键字（-tag）可能是

。我想最好是为您的问题添加更多信息。例如，不要假设读者知道“AI”是什么。@maytham-ɐɥʇʎɐɯ不确切知道你的意思，但标签存在：你所说的响应是什么意思？只要您更改以调整SVG位置，并且不重新缩放SVG，一切都应该正常。从SVG文件中删除

width

和

height

属性（即

width=“595.28px”height=“841.89px”

）。现在SVG将缩放以适应其父元素。然而不幸的是，路径上的div元素将不再停留在路径上。您必须调整它们在调整大小事件上的位置，或者将“div”作为SVG元素添加到SVG文件中，而不是添加非SVG div。关于如何使用Javascript将元素添加到SVG，这里有很多答案。对于上述简单的数字“按钮”，您只需添加一个

和一个

元素。如果您需要更复杂的东西，比如一块文本，则需要添加一个包含HTML的

元素。