SVG 只有 1 条无限线
SVG only 1 infinite line
为了完成这件事，我已经努力了几天，但似乎我做不到，所以也许有人知道它出了什么问题。我试图在 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>
非常感谢您的建议。谢谢！
您使用的路径是有洞的路径。这意味着你先画一个圆，然后为了“夹一个洞”，你在相反的方向画另一个内圆。
为了在 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 正在评论：
how can i get the line to run continuously without interruption, as you can see there is a gap on top and the lines are cuted.
在这种情况下，您需要为 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>
为了完成这件事，我已经努力了几天，但似乎我做不到，所以也许有人知道它出了什么问题。我试图在 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>
非常感谢您的建议。谢谢！
您使用的路径是有洞的路径。这意味着你先画一个圆，然后为了“夹一个洞”，你在相反的方向画另一个内圆。
为了在 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 正在评论：
how can i get the line to run continuously without interruption, as you can see there is a gap on top and the lines are cuted.
在这种情况下，您需要为 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>