如何为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 过滤器接受随机种子 numberOfOctaves 和 baseFrequency 等参数。

在给定的示例中，我对基本频率的值进行了动画处理。因为没有更多的动画属性。

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

任何帮助、想法、方法、sn-ps，衷心感谢。

---

为了简单起见，这可能是黑白的，但云动画仍然不是连续的。 Bonus snippet

Answer 1

不要为基本频率设置动画。要获得平滑的效果，请使用 360 hueRotate 和 colorMatrix（因为 hueRotate 会循环回原始值）。

http://codepen.io/mullany/pen/fmJKr

代码

<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>