在SVG路径上实现Div对象

Question

我在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>

图片示例

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