创建一条沿着曲线的虚线路径

Question

我有一个设计要移植到代码中，该设计如下：

我已经在代码中创建了大部分设计（只是一个原型，因此html / css并不完美），但是我苦苦挣扎的领域是在曲线路径中可以看到的虚线

.frame {
  width: 375px;
  height: 750px;
  background: #171B42;
  background: linear-gradient(to bottom, #171B42, #171B42 50%, #3C98FF 110%);
  position: relative;
}

#earth {
   position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}

.locked {
  text-align: center;
  margin: 76px auto;
  width: 230px;
  position: relative;
}

.locked img {
  width: 60px;
  margin: 0 26px;
}

.locked.row-1:after {
    content: "";
    width: 163px;
    height: 175px;
    background: url(https://i.imgur.com/u6v9Dkd.png) center center no-repeat;
    background-size: cover;
    position: absolute;
    top: -130px;
    right: -50px;
    bottom: 0;
    z-index: -1;
}

.locked.row-2:after {
content: "";
    width: 163px;
    height: 175px;
    background: url(https://i.imgur.com/u6v9Dkd.png) center center no-repeat;
    background-size: cover;
    position: absolute;
    top: -127px;
    left: -46px;
    bottom: 0;
    z-index: -1;
    transform: rotate(180deg);
}

.path-map {
  position: absolute;
  bottom: 180px;
  left: 0;
  right: 0;
  left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
  width:375px;
}

<div class="frame">
  
  <div class="path-map">
    
    <div class="locked row-2">
      <img src="https://i.imgur.com/h3ElY2f_d.webp?maxwidth=728&fidelity=grand">
      <img src="https://i.imgur.com/h3ElY2f_d.webp?maxwidth=728&fidelity=grand">
    </div>
    
    <div class="locked row-1">
      <img src="https://i.imgur.com/h3ElY2f_d.webp?maxwidth=728&fidelity=grand">
    </div>
    
  </div>
  
  
  <img id="earth" src="https://i.imgur.com/RR8kQx1_d.webp?maxwidth=728&fidelity=grand"/>
</div>

我想知道是否有人对如何创建该虚线路径有任何想法，它可能需要一些JavaScript吗？我不完全确定解决此问题的最佳方法是用position: absolute手动添加每个点。

任何帮助都会很棒，谢谢！

Answer 1

下面是一个示例，说明如何使用SVG <path>元素，<use>元素，<mask>元素，stroke-dasharray属性和{{3} }属性。

您可以一次定义一个<path>元素，然后使用不同的笔触样式或蒙版对其重复使用多次，在这种情况下特别方便。

body { background: darkblue; }

<svg viewBox="0 0 515 515">
  <defs>
    <mask id="mask">
      <rect fill="black" x="0" y="0" width="515" height="515"></rect>
      <rect fill="white" x="0" y="200" width="515" height="315"></rect>
    </mask>
    <path id="path" fill="none" d="M138 414C192.333 414 312.8 414 360 414C419 414 504 262 360 262C216 262 261 262 153 262C45 262 39 130 144 130C249 130 327 130 378 130C429 130 452 83 452 -2C452 -87 472 -87 452 -87"></path>
  </defs>
  <!-- solid wide line -->
  <use href="#path" stroke="rgba(255,255,255,0.2)" stroke-width="20"></use>
  <!-- solid narrow line -->
  <use href="#path" stroke="rgba(255,255,255,0.2)" stroke-width="10"></use>
  <!-- dotted full line -->
  <use href="#path" stroke="rgba(255,255,255,0.2)" stroke-width="5" stroke-dasharray="0 10" stroke-linecap="round"></use>
  <!-- dotted masked line -->
  <use href="#path" stroke="rgba(255,255,255,0.8)" stroke-width="5" stroke-dasharray="0 10" stroke-linecap="round" mask="url(#mask)"></use>
</svg>