2

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

3
  • The keyword (-tag) here would probably be <foreignObject>.
    – Sirko
    Nov 10, 2014 at 18:18
  • I think you will be best served adding more information to your question. For example, don't assume that readers know what "AI" is.
    – Kolban
    Nov 10, 2014 at 18:25
  • @maytham-ɯɐɥʇʎɐɯ Don't exactly know, what you mean, but the tag exists: developer.mozilla.org/en/docs/Web/SVG/Element/foreignObject
    – Sirko
    Jul 30, 2016 at 12:32

1 Answer 1

4

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

3
  • What do you mean by responsive? As long as you make the changes to adjust for SVG position, and you don't rescale the SVG, everything should be okay. Nov 11, 2014 at 15:02
  • Remove the width and height attributes from your SVG file (ie the width="595.28px" height="841.89px"). Now the SVG will scale to fit its parent element. However unfortunately the div-on-path elements will no longer stay on the path. You will either have to adjust their positions on resize events, or add the "divs" as SVG elements to the SVG file - rather than have non-SVG divs. Nov 12, 2014 at 9:10
  • There are plenty of answers on here about how to add elements to SVG with Javascript. For simple number "buttons" like above, you can just add a <circle> and a <text> element. If you need more complicated things, like a block of text, you will need to add a <foreignObject> element containing the HTML. Nov 12, 2014 at 9:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.