内联SVG动画功能

Question

我想知道if this pen is possible是由内联SVG动画(SMIL)，-without CSS或任何javascript创建的。特别感兴趣的是使发光圆圈的模糊和起伏，以及自然地淡入和淡出不透明的随机浮动能量粒子。请帮帮我！

我一直在整理下面的内容，但它没有那么复杂：

<g id="particle1">
<animateTransform
attributeName="transform"
type="translate"
values="0 0; -10 0; 0 0; 10 0"
dur="3s"
repeatCount="indefinite"/>
<g>
  <circle cx="100" cy="200" r="2.5" fill="#899dff">
    <animateTransform
    attributeName="transform"
    type="translate"
    from="0 0"
    to="0 -200"
    dur="3s"
    repeatCount="indefinite"/>
    <animate attributeName="opacity"
        from="1" to="0" dur="3s"
        repeatCount="indefinite"/>
  </circle>
</g>
</g>

<g id="particle2">
<animateTransform
attributeName="transform"
type="translate"
values="0 0; 15 0; 0 0; -20 0"
dur="3s"
repeatCount="indefinite"/>
<g>
  <circle cx="100" cy="200" r="2.5" fill="#899dff">
    <animateTransform
    attributeName="transform"
    type="translate"
    from="25 30"
    to="25 -200"
    dur="3s"
    repeatCount="indefinite"/>
    <animate attributeName="opacity"
        from="0" to="1" dur="3s"
        repeatCount="indefinite"
        begin="2s"/>
  </circle>
 </g>
 </g>

Answer 1

我之前的评论说SVG中没有随机数生成器-嗯，这并不完全正确。过滤器中包含一个伪随机数生成器(注意您必须设置的seed )。你可以使用它，通过一些创造性的调整，来产生闪闪发光的星星。我还没有找到一种让星星单独闪烁的变体，但这也是原始版本没有实现的。

所以，这是一个部分的答案。它不会重现整个画笔，而仅仅是闪烁的伪随机星星。

baseFrequency越大，获得的星数就越多，但同时您必须调整<feColorMatrix>值的最后一个数字。这是一种尝试和错误。对我来说，这似乎是可行的：

baseFrequency="0.04" => values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0.6 0 0 0 10 -7.8"
baseFrequency="0.1" => values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0.6 0 0 0 10 -6.7"

颜色也是通过颜色矩阵定义的。第五个数字定义红色通道:0等于0，1等于255。第十个数字是绿色通道，第15个是蓝色通道。我的星星有一个rgb(255, 0, 153)的颜色。

​

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="500" width="100%">
  <defs>
    <filter id="twinkle" style="color-interpolation-filters:sRGB">
      <feTurbulence stitchTiles="stitch" seed="500" type="fractalNoise" numOctaves="2" baseFrequency="0.1" />
      <feGaussianBlur stdDeviation="2" />
      <feColorMatrix result="blob" values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0.6 0 0 0 10 -6.7" />
      <feGaussianBlur result="blur" stdDeviation="2" />
      <feMerge>
        <feMergeNode in="blob" />
        <feMergeNode in="blur" />
        <feMergeNode in="blur" />
      </feMerge>
    </filter>
  </defs>
  <rect height="100%" width="100%" />
  <g id="field" >
    <rect style="filter:url(#twinkle)" height="500" width="100%">
      <animate attributeName="opacity" dur="1s" repeatCount="indefinite"
               keyTimes="0;0.5;1" values="0.3;0.8;0.3" keySplines=".5 0 .4 1;.6 0 .5 1" />
      <animateTransform attributeName="transform" type="translate" dur="10s" repeatCount="indefinite"
               from="0 0" to="0 -500" />
    </rect>
  </g>
  <use xlink:href="#field" y="500" />
</svg>

​