javascript - 在 SVG 路径上实现 Div 对象

Question

我在 Adob​​e 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>

图片示例

Answer 1

您将需要使用一些 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);
}

Demo fiddle here

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

1. 您的 SVG 位于窗口的最左上方。
2. 您的 SVG 未缩放(即 1:1)。

如果这些假设不正确，您将需要稍微修改一下代码。

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

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

更新

纠正假设 #1 的一个简单方法是包装您的 <svg>和容器 div 中的路径 div。如果你给那个 div position: relative ，那么您放入其中的任何 pathDivs 都将正确定位，您无需担心调整 div 位置以进行偏移。

Example here