CODEWITHSUNDEEP
javascriptimagesvg
Maytham Fahmi
Maytham Fahmi

Reputation: 33387

Implement Div objects on SVG path

I have created a path in Adobe Illustrator and export it to SVG file format.

Now I want to implement Div objects (like circles) on the path like the red circles on the path in the image example below.

I have had difficulty finding a way to do it, How to make such implementation?

SVG code with 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

Upvotes: 2

Views: 3102

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

You will need to use some Javascript. Luckily the SVG DOM provides a function that allows you to get the position of a point n along a path:

var point = mypath.getPointAtLength(n);

So once you have a reference to a path, you can position elements along it using absolute positioning.

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

Note that this is a fairly simplistic demo. For instance, it assumes that:

  1. your SVG is at the very top left of the window.
  2. your SVG is not scaled (ie. it is at 1:1).

If those assumptions are not correct, you will need to modify the code a bit.

To correct for assumption #1, you would need to adjust the position of the div by adding in the left and top offset of the SVG on the page.

There are also ways to correct for assumption #2.

Update

A simple way to correct for assumption #1 is to wrap your <svg> and path divs in a container div. If you give that div position: relative, then any pathDivs you put in there will be positioned correctly, and you don't need to worry about adjusting div positions for offset.

Example here

Upvotes: 4

Related Questions