有没有一种方法可以将一个SVG的位置附加到另一个SVG上？

Question

有没有一种方法可以将一个SVG的位置附加到另一个SVG上？

csssvg

3

我想创建一张图片，在这张图片的边缘上附着一些点，理论上，当你缩放页面/图像时，我希望这些点能够按照波浪的边缘移动。

非常感谢您提供的任何建议！

请查看此处的代码：

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>

- Coder-Chick

1

一个解决方案是将圆圈放在与波浪相同的SVG元素中。然后使用JavaScript计算波浪上点的位置，并在那里绘制圆圈。为了计算路径上点的位置，您可以使用getPointAtLength()方法。 - enxaneta

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alex L · Accepted Answer

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

矢量图形(svg)被设计为在缩放页面时完美缩放。

所以我将您的圆形元素放入波浪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>