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

coder 2023-07-31 原文

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

在 body 标签中，我有一个只有一个内部路径元素的 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 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, 0.35, {
      overwrite: true,
      offsetTop: 200,
      ease: Back.easeIn,
      onUpdate: render
    })
    TweenMax.to(settings, 0.35, {
      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, 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>

最佳答案

无需对代码做太多更改，您可以通过增加 power 和/或减少 open 函数中的 offsetTop 来实现。

TweenMax.to(settings, 0.35, {overwrite: true, offsetTop: 80, ease: Strong.easeOut, onUpdate: render })
TweenMax.to(settings, 1, {power: 120, ease: Elastic.easeOut, onUpdate: render })

$(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 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: 150,
      ease: Elastic.easeOut,
      onUpdate: render
    })
  }

  function close() {
    if (!opened) {
      return
    }
    opened = false;
    TweenMax.to(settings, 0.35, {
      overwrite: true,
      offsetTop: 200,
      ease: Back.easeIn,
      onUpdate: render
    })
    TweenMax.to(settings, 0.35, {
      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, 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>

二次贝塞尔曲线

另一种解决方案是在矩形中添加一条曲线路径(称为 quadratic Bézier curve )。曲线是这样构建的:

M{startWidth}, {startHeight} q {curvePeak}, {curveHeight}, {endWidth}, {endHeight}

startWidth - P0 的 x 轴定位:曲线开始的 x 坐标
startHeight - P0 的 y 轴定位:曲线开始的 y 坐标
curvePeak - P1 的 x 轴定位:曲线达到峰值的位置
curveHeight - P1 的 y 轴定位:曲线的高度
endWidth - P2 的 x 轴定位:曲线的维度
endHeight - P2 的 y 轴定位:曲线的倾 Angular

_{另请参阅:Quadratic Bézier Curve: Calculate Points或点击 here二次贝塞尔曲线的交互式示例。}

否定

此解决方案在使用两个不同的 animations 时存在一些问题和持续时间，就像你的情况一样。

Strong.easeOut : 0.35 秒
Elastic.easeOut : 1.00s

$(function() {

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

  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, 0.35, {
      overwrite: true,
      offsetTop: 200,
      ease: Back.easeIn,
      onUpdate: render
    })
    TweenMax.to(settings, 0.35, {
      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, 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>

积极

相反，当使用相同的动画和持续时间时效果很好。

都带有Elastic.easeOut : 1.00s

$(function() {

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

  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, 1, {
      overwrite: true,
      offsetTop: 80,
      ease: Elastic.easeOut,
      onUpdate: render
    })
    TweenMax.to(settings, 1, {
      power: 80,
      ease: Elastic.easeOut,
      onUpdate: render
    })
  }

  function close() {
    if (!opened) {
      return
    }
    opened = false;
    TweenMax.to(settings, 0.35, {
      overwrite: true,
      offsetTop: 200,
      ease: Back.easeIn,
      onUpdate: render
    })
    TweenMax.to(settings, 0.35, {
      power: 200,
      ease: Back.easeIn,
      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, 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>

关于html - 将背景过滤器应用于 svg 路径元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34043309/

有关html - 将背景过滤器应用于 svg 路径元素的更多相关文章

ruby - 将差异补丁应用于字符串/文件 - 2
对于具有离线功能的智能手机应用程序，我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl
ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby-on-rails - Rails 应用程序之间的通信 - 2
我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此
ruby - 无法运行 Rails 2.x 应用程序 - 2
我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r
ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗？ - 2
刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr
ruby-on-rails - Rails HTML 请求渲染 JSON - 2
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？最佳答案您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby 变量的内容？ - 2
我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。最佳答案您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R
ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2
我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植
ruby-on-rails - Ruby url 到 html 链接转换 - 2
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

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

二次贝塞尔曲线

有关html - 将背景过滤器应用于 svg 路径元素的更多相关文章

随机推荐