css - 有没有办法将一个 SVG 的位置附加到另一个？

Question

我正在尝试构建一个图像，其中一些点附在波浪的边界上。理论上，当您缩放页面/图像时，我希望这些点跟随波浪的边缘。

任何建议都会很棒!

请看这里的代码:

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>

Answer 1

你应该只使用一个 svg 标签，除非有充分的理由使用多个？

svg(标量矢量图形)旨在在您缩放页面时完美缩放。

所以我把你的 circle 元素放在 waves svg 元素中，现在一切都保持原样？

查看此演示: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%;
}

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