image - Implement Div objects on SVG path -

image - Implement Div objects on SVG path -

i have created path in adobe illustrator , export svg file format.

now want implement div objects (like circles) on path reddish circles on path in image illustration below.

i have had difficulty finding way it, how create such implementation?

svg code path data

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

image example

you need utilize javascript. luckily svg dom provides function allows position of point n along path:

var point = mypath.getpointatlength(n);

so 1 time have reference path, can position elements along using absolute positioning.

pathondiv("1", 0.1); function pathondiv(text, pos) { // coordinates of point fraction 'pos' along path var path = document.getelementbyid("mypath"); var pathlength = path.gettotallength(); var loc = path.getpointatlength(pos * pathlength); // create 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

note simplistic demo. instance, assumes that:

your svg @ top left of window. your svg not scaled (ie. @ 1:1).

if assumptions not correct, need modify code bit.

to right assumption #1, need adjust position of div adding in left , top offset of svg on page.

there ways right assumption #2.

update

a simple way right assumption #1 wrap <svg> , path divs in container div. if give div position: relative, pathdivs set in there positioned correctly, , don't need worry adjusting div positions offset.

example here

image svg