Question

我正在学习如何编写/创建SVG并且正在处理加载指示器。这个概念很简单;一个圆圈，在一个圆圈中移动。

但是，我想通过向移动圆圈添加模糊（通常创建模糊的尾部）来使运动看起来更逼真。我搜索过并发现你可以在x或y方向上运动模糊，但由于我的圆圈在x和y之间不断切换，因此无法达到预期的效果。我还尝试通过添加较低的不透明度来伪造它，逐渐减小圆圈到我的圆圈后面但是如果图像很大则看起来很糟糕。我知道我可以用一条路来代替一个带有模糊模糊的填充渐变的圆圈，但我很好奇，实现这种运动模糊效果的最佳/标准方法是什么？

Answer 1

嗯，你可以做这样的事情，这会增加一个方向模糊并稍微侵蚀它，你现有的变换需要适当地旋转它

var filePath = '/home/srinesh/Projects/test/hello';
var createDir = function (dirName) {
  return new promise(function (resolve, reject) {
    var result = fs.mkdirSync(dirName);
    if(result == undefined){resolve('folder created successfully!');}
    else {reject('createDir error: '+result);}
  })
};

var createProject = function (filePath) {
        var result = createDir(filePath);
        console.log(result);
      })
      .catch(function (error) {
        console.log(error);
      });
};

svg {
  max-width:500px
}

svg .cls-1 {
  fill: #F00;
}

svg .white {
  fill: white;
}

如何将运动模糊尾部添加到圆圈中的svg元素？

1 个答案: