Is there a way to attach the position of one SVG to another?

Question

I am trying to build an image where some dots are attached to the border of waves. In theory, I would like the dots to follow the edges of the waves as you scale the page/image.

Any advice would be amazing!

Please take a look at the code here:

https://jsfiddle.net/reveriedesigns/oxyemnu2/

#wave {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: auto;
}

.circle {
  position: absolute;
}

#leftcircle{
  top: 80%;
  left: 20%;
}

#centercircle{
  top: 60%;
  left: 55%;
}

#rightcircle{
  top: 82%;
  left: 70%;
}

user_9792594 · Answer

You should just use one svg tag unless there is good reason to use more than one?

svg (scalar vector graphics) are designed to scale perfectly as you scale the page.

So I took your circle elements and put them inside the waves svg element, and now everything stays in place?

Check out this demo: https://jsfiddle.net/alexander_L/r8c07h1g/5/

body{
margin: 0;
padding: 0;
}
#background {
  height: 1000px;
  background: rgb(76, 72, 143);
  background: -webkit-linear-gradient(left, rgba(76, 72, 143, 1) 0%, rgba(56, 53, 108, 1) 35%, rgba(36, 35, 72, 1) 100%);
  background: -moz-linear-gradient(left, rgba(76, 72, 143, 1) 0%, rgba(56, 53, 108, 1) 35%, rgba(36, 35, 72, 1) 100%);
  background: -o-linear-gradient(left, rgba(76, 72, 143, 1) 0%, rgba(56, 53, 108, 1) 35%, rgba(36, 35, 72, 1) 100%);
  background: linear-gradient(to right, rgba(76, 72, 143, 1) 0%, rgba(56, 53, 108, 1) 35%, rgba(36, 35, 72, 1) 100%);
}
#wave {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: auto;
}
.circle {
  position: absolute;
} 
#leftcircle{
  top: 80%;
  left: 20%;
}
#centercircle{
  top: 60%;
  left: 55%;
}
#rightcircle{
  top: 82%;
  left: 70%;
}

Is there a way to attach the position of one SVG to another?

1 Answers