SVG - 可以从一侧添加 stroke-dasharray 渐变或透明

Posted 2023-03-06

【中文标题】SVG - 可以从一侧添加 stroke-dasharray 渐变或透明

【英文标题】：SVG - It is possible to add stroke-dasharray Gradient or transparent form one side

【发布时间】：2018-12-27 07:01:42

【问题描述】：

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

.svg-main 
    width: 700px;
    margin: 30px auto;
    position: relative;

svg#svga 
    position: absolute;
    top: 0;
    left: auto;
    bottom: auto;
    right: auto;


.st2fill:none;stroke:#cccccc;stroke-width:6;
.sd1fill:none;stroke:#000000; stroke-width:6;stroke-linecap:round;
.circfill:#000000; 

<div class="svg-main">
<svg id="svga" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	   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>

【问题讨论】：

我投票重新打开，因为链接为重复的问题是关于描述沿路径的渐变的一般问题。这个问题试图找到的不是一个静态的解决方案，而是为沿着该路径的渐变设置动画。虽然这看起来更复杂，但实际上并非如此，因为梯度仅沿相对较短的距离延伸。我确实有一个答案，将它添加到链接的问题中至少是不合适的，但它的专业化非常适合这里。

由于我现在无法回答，请参阅codepen - 你必须从那里弄清楚。

我同意。这与标记为重复的问题不同。它们略有不同，因此需要不同的解决方案。

【参考方案1】：

请参考这里

.svg-main 
    width: 700px;
    margin: 30px auto;
    position: relative;

svg#svga 
    position: absolute;
    top: 0;
    left: auto;
    bottom: auto;
    right: auto;


.st2fill:none;stroke:#cccccc;stroke-width:6;
.sd1fill:none; stroke-width:6;stroke-linecap:round;
.circfill:#000000; 

<div class="svg-main">
   
<svg id="svga" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	   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>

【讨论】：

谢谢你的回答，我只需要尾巴末端的渐变而不是整个尾巴请看这个，示例截图。