gpt4 book ai didi

html - SVG - 可以在一侧添加 stroke-dasharray 渐变或透明形式

转载 作者:技术小花猫 更新时间:2023-10-29 11:43:18 24 4
gpt4 key购买 nike

我创建了一个 SVG 动画,我允许 stroke-dasharray 在其中移动。我是否可以在 stroke-dasharray 的尾部添加渐变并保持一侧透明,如您在示例中看到的那样?

enter image description here

.svg-main {
width: 700px;
margin: 30px auto;
position: relative;
}
svg#svga {
position: absolute;
top: 0;
left: auto;
bottom: auto;
right: auto;
}

.st2{fill:none;stroke:#cccccc;stroke-width:6;}
.sd1{fill:none;stroke:#000000; stroke-width:6;stroke-linecap:round;}
.circ{fill:#000000; }
<div class="svg-main">
<svg id="svga" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="300px" height="200px" viewBox="0 0 685 310">
<g class="st2">
<path id="loop-normal" d="M343.6,156.5c11,15.9,104.6,147.2,181.9,147.6c0.1,0,0.8,0,1,0c82.1-0.3,148.6-67,148.6-149.2
c0-82.4-66.8-149.2-149.2-149.2c-77.2,0-170.8,131-182.2,147.5c-0.8,1.1-1.6,2.3-2.1,3.1c-10.6,15.3-104.8,147.8-182.4,147.8
C76.7,304.2,9.9,237.4,9.9,155S76.7,5.8,159.1,5.8c77.2,0,170.7,130.9,182.2,147.5C342.1,154.4,342.9,155.6,343.6,156.5z"/>
</g>
<use class="sd1" stroke-dasharray="200 1710" xlink:href="#loop-normal">
<animate attributeName="stroke-dashoffset"
from="200" to="-1710"
begin="0s" dur="10s"
repeatCount="indefinite"/>
</use>

<circle id="plug" class="circ" cx="0" cy="0" r="7"/>
<animateMotion
xlink:href="#plug"
dur="10s"
rotate="auto"
repeatCount="indefinite"
calcMode="linear"
keyTimes="0;1"
keyPoints="0;1">
<mpath xlink:href="#loop-normal"/>
</animateMotion>
</svg>
</div>

最佳答案

请引用这个

.svg-main {
width: 700px;
margin: 30px auto;
position: relative;
}
svg#svga {
position: absolute;
top: 0;
left: auto;
bottom: auto;
right: auto;
}

.st2{fill:none;stroke:#cccccc;stroke-width:6;}
.sd1{fill:none; stroke-width:6;stroke-linecap:round;}
.circ{fill:#000000; }
<div class="svg-main">

<svg id="svga" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="300px" height="200px" viewBox="0 0 685 310">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#000000" />
<stop offset="100%" stop-color="#ffffff" />
</linearGradient>
</defs>
<g class="st2" >
<path id="loop-normal" d="M343.6,156.5c11,15.9,104.6,147.2,181.9,147.6c0.1,0,0.8,0,1,0c82.1-0.3,148.6-67,148.6-149.2
c0-82.4-66.8-149.2-149.2-149.2c-77.2,0-170.8,131-182.2,147.5c-0.8,1.1-1.6,2.3-2.1,3.1c-10.6,15.3-104.8,147.8-182.4,147.8
C76.7,304.2,9.9,237.4,9.9,155S76.7,5.8,159.1,5.8c77.2,0,170.7,130.9,182.2,147.5C342.1,154.4,342.9,155.6,343.6,156.5z"/>
</g>
<use class="sd1" stroke="url(#gradient)" stroke-dasharray="200 1710" xlink:href="#loop-normal">
<animate attributeName="stroke-dashoffset"
from="200" to="-1710"
begin="0s" dur="10s"
repeatCount="indefinite"/>
</use>

<circle id="plug" class="circ" cx="0" cy="0" r="7"/>

<animateMotion
xlink:href="#plug"
dur="10s"
rotate="auto"
repeatCount="indefinite"
calcMode="linear"
keyTimes="0;1"
keyPoints="0;1">
<mpath xlink:href="#loop-normal"/>
</animateMotion>
</svg>
</div>

关于html - SVG - 可以在一侧添加 stroke-dasharray 渐变或透明形式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51417587/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com