如何设置 feTurbulence 的动画以显示连续

Question

feTurbulence 滤镜用于创建云。通过动画频率值，生成的云被放大或缩小。我希望它们从右向左滑动。到目前为止我已经做到了：

<svg height="0" width="0" style=";position:absolute;margin-left: -100%;">
	<defs>
		<filter id="imagenconturbulencias" x="0" y="0" width="100%" height="100%">
			<feTurbulence result="cloud" baseFrequency=".2" seed="22" stitchTiles="nostitch" type="fractalNoise" numOctaves="3">
			<animate
				attributeName="baseFrequency"
				calcMode="spline"
				dur="5s"
				values=".2;.1;"
				repeatCount="indefinite"
			/>
			</feTurbulence>
			<feComposite operator="in" in="cloud" in2="SourceGraphic"/>
		</filter>
	</defs>
	<g stroke="none" stroke-width="4" id="rlog" fill="#eee"><path d="M34.2,13.9v19.5h-7.3V13.9H34.2z M30.5,5.2c1,0,1.8,0.3,2.6,1s1.1,1.5,1.1,2.5c0,1-0.3,1.8-1,2.5s-1.6,1-2.6,1c-1.1,0-1.9-0.3-2.6-1s-1-1.5-1-2.5c0-1,0.4-1.8,1.1-2.5S29.5,5.2,30.5,5.2z"/></g>
</svg>

<div id="a">
	<svg viewBox="0 0 230 280">
		<use filter="url(#imagenconturbulencias)" xlink:href="#rlog"></use>
	</svg>
</div>

如果你仔细观察，5 秒后动画就会重复出现，这是理所应当的！但它看起来并不那么漂亮。

我知道这个过滤器用于创建逼真的云状结构。我们怎样才能不断地移动这些云呢？

feTurbulence过滤器接受 randomSeed numberOfOctaves 和 baseFrequency 等参数。

在给定的示例中，我用动画显示了基本频率的值。因为没有更多的属性可以设置动画。

如何让这个动画看起来连续呢？我们是否在这个湍流生成的东西上使用柏林噪声发生器结合矩阵和位移图，并以某种方式一起制作动画？（只是头脑风暴..）

任何帮助、想法、方法、片段，衷心感谢。

---

为了简单起见，这可以是黑白的，但云动画仍然不连续。奖金片段

Answer 1

不要设置基本频率的动画。为了获得平滑的效果，请使用 360 度色调旋转和颜色矩阵（因为色调旋转会循环回原始值）。

<svg x="0px" y="0px" width="800px" height="500px" viewbox="0 0 800 500">

    <script type="text/ecmascript" xlink:href="http://www.codedread.com/lib/smil.user.js"/>

  <defs>
<filter id="heavycloud" color-interpolation-filters="sRGB" x="0%" y="0%" height="100%" width="100%">
  <feTurbulence type="fractalNoise" result="cloudbase" baseFrequency=".0025" numOctaves="5" seed="24"/>

    <feColorMatrix in="cloudbase" type="hueRotate" values="0" result="cloud">
    <animate attributeName="values" from="0" to="360" dur="20s" repeatCount="indefinite"/>
  </feColorMatrix>


  <feColorMatrix in="cloud" result="wispy" type="matrix" 
                               values="4 0 0 0 -1
                                       4 0 0 0 -1
                                       4 0 0 0 -1
                                       1 0 0 0 0   
                                       "/>

  <feFlood flood-color="#113388" result="blue"/>

  <feBlend mode="screen" in2="blue" in="wispy"/>

  <feGaussianBlur stdDeviation="4"/>

  <feComposite operator="in" in2="SourceGraphic"/>

</filter>
  </defs>
  <text x="30" y="380" filter="url(#heavycloud)" font-size="400" font-family="arial" stroke-color="blue" font-weight="bold" kerning="-75" font-stretch="condensed">SVG!</text>


</svg>