时间戳

首页 > 解决方案 > SVG 只有 1 条无限线

html - SVG 只有 1 条无限线

问题描述

我一直在努力完成这几天，但似乎我做不到，所以也许有些人知道它有什么问题。我试图在 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>

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

标签： htmlcsssvgcss-animationssvg-animate

解决方案

您使用的路径是带孔的路径。这意味着你画了一个圆，然后，为了“剪一个洞”，你在相反的方向上画了另一个内圆。

为了在 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>

更新

OP正在评论：

我怎样才能让线路不间断地连续运行，正如你所看到的那样，顶部有一个间隙并且线路被切断了。

在这种情况下，您需要为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>

推荐阅读