小编Mic*_*kov的帖子

将背景过滤器应用于svg path元素

我有一个带有一些背景图片的页面.

在body标签中,我有一个只有一个内部路径元素的svg元素.

如何将path-filter添加到路径元素,以便它可以模糊非矩形形状的背景？

svg路径背景 - 过滤方案

$(function() {

  var pattern = "M0,{offsetTop} C{ax1},{power},{ax2},{power},{width},{offsetTop} L{width},{height},0,{height}Z";

  var $svg = $('svg#footer');
  var $path = $svg.find('path');

  var settings = {
    width: 1200,
    height: 200,
    offsetTop: 200,
    power: 200
  }

  settings.ax1 = settings.width / 3 * 1;
  settings.ax2 = settings.width / 3 * 2;

  function render() {
    var newPath = pattern;
    for (var i in settings) {
      newPath = newPath.split('{' + i + '}').join(settings[i]);
    }
    $path.attr('d', newPath);
  }

  TweenMax.set($svg, {
    force3D: true
  })

  var opened = false;

  function …

Run Code Online (Sandbox Code Playgroud)

html css svg filter

Mic*_*kov

2017 06-23

21
推荐指数

1
解决办法

910
查看次数