CODEWITHSUNDEEP
csssvg
Coder-Chick
Coder-Chick

Reputation: 33

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

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%;
}
<svg id="wave"  viewBox="0 0 1440 320">

    <path stroke="#48609D" fill="#454E88" fill-opacity="0.7" d="M0,160L60,133.3C120,107,240,53,360,58.7C480,64,600,128,720,176C840,224,960,256,1080,224C1200,192,1320,96,1380,48L1440,0L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
    <path stroke="#48609D" fill="#454E88" fill-opacity="0.7" d="M0,224L60,224C120,224,240,224,360,186.7C480,149,600,75,720,53.3C840,32,960,64,1080,96C1200,128,1320,160,1380,176L1440,192L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
    <path stroke="#48609D" fill="#454E88" fill-opacity="0.7" d="M0,96L40,106.7C80,117,160,139,240,170.7C320,203,400,245,480,256C560,267,640,245,720,218.7C800,192,880,160,960,165.3C1040,171,1120,213,1200,234.7C1280,256,1360,256,1400,256L1440,256L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path>

  </svg>

  <svg class="circle" id="centercircle">
     <circle stroke="#48609D" fill="#D2D4E4" fill-opacity="0.4" cx="5" cy="5" r="5"/>
  </svg>

  <svg class="circle" id="leftcircle" >
      <circle stroke="#48609D" fill="#D2D4E4" fill-opacity="0.4" cx="5" cy="5" r="5"/>
  </svg>

  <svg class="circle" id="rightcircle">
      <circle stroke="#48609D" fill="#D2D4E4" fill-opacity="0.4" cx="5" cy="5" r="5"/>
  </svg>

Upvotes: 3

Views: 80

Answers (1)

Alex L
Alex L

Reputation: 4241

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/

enter image description here

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%;
}
<div id="background">
  <svg id="wave"  viewBox="0 0 1440 320">     
    <path stroke="#48609D" fill="#454E88" fill-opacity="0.7" d="M0,160L60,133.3C120,107,240,53,360,58.7C480,64,600,128,720,176C840,224,960,256,1080,224C1200,192,1320,96,1380,48L1440,0L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
    <path stroke="#48609D" fill="#454E88" fill-opacity="0.7" d="M0,224L60,224C120,224,240,224,360,186.7C480,149,600,75,720,53.3C840,32,960,64,1080,96C1200,128,1320,160,1380,176L1440,192L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
    <path stroke="#48609D" fill="#454E88" fill-opacity="0.7" d="M0,96L40,106.7C80,117,160,139,240,170.7C320,203,400,245,480,256C560,267,640,245,720,218.7C800,192,880,160,960,165.3C1040,171,1120,213,1200,234.7C1280,256,1360,256,1400,256L1440,256L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path>

    <circle stroke="#48609D" fill="#D2D4E4" fill-opacity="0.4" cx="325" cy="49" r="10"/>
    <circle stroke="#48609D" fill="#D2D4E4" fill-opacity="0.4" cx="785" cy="37" r="10"/>
    <circle stroke="#48609D" fill="#D2D4E4" fill-opacity="0.4" cx="940" cy="155" r="10"/>
  </svg>
</div>

Upvotes: 1

Related Questions