SVG只有1条无限线

Question

几天来，我一直在为完成这件事而奋斗，但似乎我做不到，所以也许有人知道这是怎么回事。我试着在svg周围画一条无限的线，但每次我都能得到其中的2条。

​

  .hex-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .hex-bg svg {
    width: 100%;
    height: 100%; 
  }
.hex-bg .color-stroke,
.hex-bg .outer-stroke {
  stroke: #3851df;
}
  .hex-bg .gradient-stop-color {
    stop-color: rgba(56, 81, 223, 0.7);
  }
   .img-wrap .hex-bg .color-fill-stroke {
    stroke-width: 5px;
  }
  
.img-wrap .hex-bg {
    -webkit-transform: translate(-48%, -77%);
    transform: translate(-48%, -77%);
    z-index: 0;
    left: 50%;
    top: 100%;
    z-index: 0;
  }
.img-wrap .hex-bg .outer-stroke {
    stroke-width: 5px;
    opacity: 1;
    stroke-dasharray: 250;
    -webkit-animation: color-stroke-moving-data-v-7ec1d1c1 5s infinite linear;
    animation: color-stroke-moving-data-v-7ec1d1c1 5s infinite linear;
}

@keyframes color-stroke-moving-data-v-7ec1d1c1 {
    to {
      stroke-dashoffset: 1000;
    }
  }

<div class="img-wrap">
<div class="hex-bg"> 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 750 500"><defs><clipPath id="clip-path"><rect class="cls-1 " x="-93.38" y="-36.03" width="899.19" height="564.52"/></clipPath><linearGradient id="Degradado_sin_nombre_3" x1="356.21" y1="46.62" x2="356.21" y2="423.32" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a35d11"/><stop offset="2" class="gradient-stop-color" stop-color="#3f3f51"/></linearGradient></defs><g class="cls-2"><g id="OBJECTS"><g class="cls-3"> 
                                        
<path class="cls-5 outer-stroke color-fill-stroke" d="M356.21,51c-105.39,0-190.82,83.93-190.82,187.46s85.43,187.46,190.82,187.46S547,342,547,238.46,461.6,51,356.21,51Zm2,359.36c-88.43.86-175.46-71.59-176.75-169.49-1.29-98.5,84.86-174.35,174.64-174.43C447.62,66.37,534,145,531.25,243.63,528.61,338.45,444.81,409.51,358.24,410.36Z"/></g></g></g></svg>
</div></div>

<style>.cls-1{fill:none;}.cls-2{isolation:isolate;}.cls-3{clip-path:url(#clip-path);}.cls-4{opacity:0.4;mix-blend-mode:multiply;}.cls-5{fill:url(#Degradado_sin_nombre_3);}</style>

​

非常感谢你的建议。谢谢！

Answer 1

您所使用的路径是一条有洞的路径。这意味着你画了一个圆圈，然后，为了“夹紧一个洞”，你画了另一个相反方向的内圆。

为了在svg周围只获得一条“无限线”，您需要删除绘制孔的部分，即将d属性从所拥有的更改为M356.21,51c-105.39,0-190.82,83.93-190.82,187.46s85.43,187.46,190.82,187.46S547,342,547,238.46,461.6,51,356.21,51Z。

我在第二个m (移动到)命令中破坏了d属性。

但是，如果您想保留这个洞，您将需要为这条线添加一条路径。

​

.hex-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .hex-bg svg {
    width: 100%;
    height: 100%; 
  }
.hex-bg .color-stroke,
.hex-bg .outer-stroke {
  stroke: #3851df;
}
  .hex-bg .gradient-stop-color {
    stop-color: rgba(56, 81, 223, 0.7);
  }
   .img-wrap .hex-bg .color-fill-stroke {
    stroke-width: 5px;
  }
  
.img-wrap .hex-bg {
    -webkit-transform: translate(-48%, -77%);
    transform: translate(-48%, -77%);
    z-index: 0;
    left: 50%;
    top: 100%;
    z-index: 0;
  }
.img-wrap .hex-bg .outer-stroke {
    stroke-width: 5px;
    opacity: 1;
    stroke-dasharray: 250;
    -webkit-animation: color-stroke-moving-data-v-7ec1d1c1 5s infinite linear;
    animation: color-stroke-moving-data-v-7ec1d1c1 5s infinite linear;
}

@keyframes color-stroke-moving-data-v-7ec1d1c1 {
    to {
      stroke-dashoffset: 1000;
    }
  }

<div class="img-wrap">
<div class="hex-bg"> 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 750 500"><defs><clipPath id="clip-path"><rect class="cls-1 " x="-93.38" y="-36.03" width="899.19" height="564.52"/></clipPath><linearGradient id="Degradado_sin_nombre_3" x1="356.21" y1="46.62" x2="356.21" y2="423.32" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a35d11"/><stop offset="2" class="gradient-stop-color" stop-color="#3f3f51"/></linearGradient></defs><g class="cls-2"><g id="OBJECTS"><g class="cls-3"> 



<path id="kk" class="outer-stroke color-fill-stroke" d="M356.21,51c-105.39,0-190.82,83.93-190.82,187.46s85.43,187.46,190.82,187.46S547,342,547,238.46,461.6,51,356.21,51Z" fill="none"/>
<path class="cls-5 color-fill-stroke" d="M356.21,51c-105.39,0-190.82,83.93-190.82,187.46s85.43,187.46,190.82,187.46S547,342,547,238.46,461.6,51,356.21,51Zm2,359.36c-88.43.86-175.46-71.59-176.75-169.49-1.29-98.5,84.86-174.35,174.64-174.43C447.62,66.37,534,145,531.25,243.63,528.61,338.45,444.81,409.51,358.24,410.36Z"/></g></g></g></svg>
</div></div>

<style>.cls-1{fill:none;}.cls-2{isolation:isolate;}.cls-3{clip-path:url(#clip-path);}.cls-4{opacity:0.4;mix-blend-mode:multiply;}.cls-5{fill:url(#Degradado_sin_nombre_3);}</style>

​

更新

“任择议定书”正在评论：

我如何使线连续运行，不间断，因为你可以看到，在顶部有一个缺口，线被切断。

在这种情况下，您需要为stroke-dasharray和stroke-dashoffset使用不同的值。您可以使用stroke-dashoffset: 1188.557;，其中1188.557是.outer-stroke的总长度。对于stroke-dasharray，我使用的是stroke-dasharray: 148.57;，其中148.57是1188.557 /8。这将给你4次笔画和4次间隙，总长度等于路径的长度。

为了知道路径的长度，我使用了getTotalLength()方法。

​

svg {
    width: 100%;
    height: 100%; 
  }
.color-stroke,
.outer-stroke {
  stroke: #3851df;
}
.gradient-stop-color {
    stop-color: rgba(56, 81, 223, 0.7);
  }
.color-fill-stroke {
    stroke-width: 5px;
  }
.outer-stroke {
    stroke-width: 5px;
    opacity: 1;
    stroke-dasharray: 148.57;
    animation: color-stroke-moving-data-v-7ec1d1c1 5s infinite linear;
}

@keyframes color-stroke-moving-data-v-7ec1d1c1 {
    to {
      stroke-dashoffset: 1188.557;
    }
  }

.cls-5{fill:url(#Degradado_sin_nombre_3);}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 750 500">
  <defs>
    <clipPath id="clip-path"><rect class="cls-1 " x="-93.38" y="-36.03" width="899.19" height="564.52"/></clipPath>
    <linearGradient id="Degradado_sin_nombre_3" x1="356.21" y1="46.62" x2="356.21" y2="423.32" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#a35d11"/>
      <stop offset="2" class="gradient-stop-color" stop-color="#3f3f51"/></linearGradient>   
  </defs>
  <g class="cls-2">
    <g id="OBJECTS">
      <g class="cls-3"> 
<path id="stroke" class="outer-stroke color-fill-stroke" d="M356.21,51c-105.39,0-190.82,83.93-190.82,187.46s85.43,187.46,190.82,187.46S547,342,547,238.46,461.6,51,356.21,51Z" fill="none"/>
<path class="cls-5 color-fill-stroke" d="M356.21,51c-105.39,0-190.82,83.93-190.82,187.46s85.43,187.46,190.82,187.46S547,342,547,238.46,461.6,51,356.21,51Zm2,359.36c-88.43.86-175.46-71.59-176.75-169.49-1.29-98.5,84.86-174.35,174.64-174.43C447.62,66.37,534,145,531.25,243.63,528.61,338.45,444.81,409.51,358.24,410.36Z"/></g></g></g></svg>

​