html – 将背景过滤器应用于svg路径元素

概述我有一个带有一些背景图片的页面. 在body标签中,我有一个只有一个内部路径元素的svg元素. 如何将path-filter添加到路径元素,以便它可以模糊非矩形形状的背景？ $(function() { var pattern = "M0,{offsetTop} C{ax1},{power},{ax2},{power},{width},{offsetTop} L{width},{height 我有一个带有一些背景图片的页面. @H_502_2@在body标签中,我有一个只有一个内部路径元素的svg元素.

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

$(function() {  var pattern = "M0,{offsettop} C{ax1},{power},{ax2},{wIDth},{offsettop} L{wIDth},{height},{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 open() {    if (opened) {      return    }    opened = true;    TweenMax.to(settings,0.35,{      overwrite: true,offsettop: 80,ease: Strong.eaSEOut,onUpdate: render    })    TweenMax.to(settings,1,{      power: 80,ease: Elastic.eaSEOut,onUpdate: render    })  }  function close() {    if (!opened) {      return    }    opened = false;    TweenMax.to(settings,ease: Back.easeIn,{      power: 200,delay: 0.15,ease: Back.eaSEOut,onUpdate: render    })  }  $(window).on('mousedown touchstart',function(e) {    opened ? close() : open();  })  open();})

HTML,body {  margin: 0;  padding: 0;  wIDth: 100%;  height: 100%;}body {  background-image: url('http://i839.photobucket.com/albums/zz314/mrkanpuc/stuffs/1PZ1.jpg');  background-repeat: no-repeat;  background-size: cover;}svg {  position: absolute;  bottom: 0;  wIDth: 100%;  height: 200px;}svg path {  fill: rgba(0,0.5);}

<script src="https://code.jquery.com/jquery-1.11.3.min.Js"></script><script src="https://cdnjs.cloudflare.com/AJAX/libs/gsap/1.18.0/TweenMax.min.Js"></script><svg ID="footer" vIEwBox="0 0 1200 200" preserveAspectRatio="none"><path/></svg>

解决方法 如果不对代码进行太多更改,可以通过增加功能和/或减少open函数中的offsettop来实现.

TweenMax.to(settings,{overwrite: true,onUpdate: render })TweenMax.to(settings,{power: 120,onUpdate: render })

$(function() {  var pattern = "M0,{      power: 150,0.5);}

<script src="https://code.jquery.com/jquery-1.11.3.min.Js"></script><script src="https://cdnjs.cloudflare.com/AJAX/libs/gsap/1.18.0/TweenMax.min.Js"></script><svg ID="footer" vIEwBox="0 0 1200 200" preserveAspectRatio="none"><path/></svg>

@H_502_2@二次BézIEr曲线

@H_502_2@另一种解决方案是在矩形中添加一条曲线路径(称为quadratic Bézier curve).曲线构建如下：

M{startWIDth},{startHeight} q {curvePeak},{curveHeight},{enDWIDth},{endHeight}

@H_502_2@> startWIDth – 曲线开始的P0：x坐标的x轴定位
> startHeight – 曲线开始的P0：y坐标的y轴定位
> curvePeak – P1的x轴定位：曲线达到峰值
> curveHeight – P1的y轴定位：曲线的高度
> enDWIDth – P2的x轴定位：曲线的尺寸
> endHeight – P2的y轴定位：曲线的倾斜度

@H_502_2@另请参阅：Quadratic Bézier Curve: Calculate Points或单击here以获取二次BézIEr曲线的交互示例.

@H_502_2@负

@H_502_2@在使用两个不同的animations和持续时间时,此解决方案存在一些问题,例如您的情况.

@H_502_2@> Strong.easeOut：0.35s
> Elastic.easeOut：1.00s

$(function() {  var pattern = "M0,{height}Z q 600,100,1200,0";  var $svg = $('svg#footer');  var $path = $svg.find('path');  var settings = {    wIDth: 1200,0.5);}

<script src="https://code.jquery.com/jquery-1.11.3.min.Js"></script><script src="https://cdnjs.cloudflare.com/AJAX/libs/gsap/1.18.0/TweenMax.min.Js"></script><svg ID="footer" vIEwBox="0 0 1200 200" preserveAspectRatio="none"><path/></svg>

@H_502_2@正

@H_502_2@相反,它在使用相同的动画和持续时间时效果很好.

@H_502_2@两者均为Elastic.easeOut：1.00s

$(function() {  var pattern = "M0,0.5);}

<script src="https://code.jquery.com/jquery-1.11.3.min.Js"></script><script src="https://cdnjs.cloudflare.com/AJAX/libs/gsap/1.18.0/TweenMax.min.Js"></script><svg ID="footer" vIEwBox="0 0 1200 200" preserveAspectRatio="none"><path/></svg>

总结

以上是内存溢出为你收集整理的html – 将背景过滤器应用于svg路径元素全部内容，希望文章能够帮你解决html – 将背景过滤器应用于svg路径元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。