SVG 滤镜

2019-05-07 00:04|来源: 网路

SVG滤镜用来增加对SVG图形的特殊效果。


SVG 滤镜

在本教程中,我们将仅展示一个可能采用的特殊效果。基础知识展示后,你已经学会使用特殊效果,你应该能够适用于其他地方。这里的关键是给你一个怎样做SVG的想法,而不是重复整个规范。

SVG可用的滤镜是:

  • feBlend - 与图像相结合的滤镜

  • feColorMatrix - 用于彩色滤光片转换

  • feComponentTransfer

  • feComposite

  • feConvolveMatrix

  • feDiffuseLighting

  • feDisplacementMap

  • feFlood

  • feGaussianBlur

  • feImage

  • feMerge

  • feMorphology

  • feOffset - 过滤阴影

  • feSpecularLighting

  • feTile

  • feTurbulence

  • feDistantLight - 用于照明过滤

  • fePointLight - 用于照明过滤

  • feSpotLight - 用于照明过滤

  • Remark 除此之外,您可以在每个 SVG 元素上使用多个滤镜!



相关问答

更多
  • 滤镜抽出怎么用[2019-10-21]

    建议网上搜一下教程 “抽出”滤镜对话框为隔离前景对象并抹除它在图层上的背景提供了一种高级方法。即使对象的边缘细微、复杂或无法确定,也无需太多的操作就可以将其从背景中剪贴。使用“抽出”对话框中的工具指定抽出图像的部分。通过拖移对话框的右下角可以调整对话框的大小。 从对象的背景中抽出对象: 在“图层”调板中,选择包含要抽出的对象的图层。如果选择背景图层,背景图层在抽出后将变成普通图层。如果图层包含选区,则抽出功能只抹除选中区域的背景。 要避免丢失原来的图像信息,请复制图层或制作原图像状态的快照。 选取“滤镜”> ...
  • 要实现你说的效果通常需要选择方形的滤镜(有配套的安装框架,一头是圈的连接在镜头的滤镜接口上,另一头可以插入方形的各种滤镜),比如你想要让天空变红色而地面景物是正常色彩,就可以选择红色的渐变滤镜。这种滤镜一半有颜色另一半是透明的,你只要移动滤镜到画面中合适的位置就可以了。当然了,仅买所需要的方形滤镜使用时用手拿着也可以。
  • 您可以使用SVG滤镜进行反转:
    我认为问题是那些filterUnits =“objectBoundingBox”后跟维度,你必须打算成为userSpace单位(37等)。 Chrome已经发现你必须指的是单位,但Firefox相信你知道你正在做什么,而你真的想让你的滤波器宽度达到边界框的3700%。 只需删除该声明,Firefox和Chrome开始看起来更像是彼此。 (照明单元在浏览器中也可能存在问题 - 但我认为这不是问题所在。) I think the problem is those filterUnits="objectBound ...
  • 这看起来效果很好: webkit2png -F blue.svg -o rendered -F表示生成Full分辨率PNG而没有缩略图, -o指定输出文件名将为rendered-full.png 。 我缩小了尺寸,使其适合Stack Overflow,但显示的命令实际上提供了全分辨率的2880x2880图像。 This seems to work nicely: webkit2png -F blue.svg -o rendered The -F says to generate the Full res ...
  • 要获得更好的性能,可以在filter属性上将color-interpolation-filters属性设置为“sRGB”: 据我所知,Safari不支持color-interpolation-filters To get better performance, you can s ...
  • 弗兰克说,你可以使用ImageView和setAlpha()。 或者,在draw()方法中将精灵渲染到画布可能更容易。 如果您正在编写游戏,那么您可能会发现在游戏循环中渲染SVG可能不够快。 因此,您可能需要将所有SVG精灵预渲染到位图(即启动时)并将它们绘制到Canvas中。 Paint p = new Paint(); p.setAlpha(alpha); canvas.drawBitmap(sprite, x,y, p); You could use an ImageView and setAlph ...
  • 为了爱上帝,请向您的过滤器添加明确的ins和结果。 否则就像试图推意大利面。 这是你想要做的:
  • 那么你可以使用JavaScript来计算正确的%并插入它们,但是失败了 - 这样的事情应该有效。 (尽管feImage的大小和定位可能会在IE10中出现错误)。
  • 如果你有正确的“魔法”displaMap,你可以像素化图像。 随意使用下面提到的那个(Zoltan Fegyver提供)。 请注意,下面的示例代码具有位于不同域上的位移图图像。 这对Firefox不起作用 - 因此对于生产代码,您需要从与源图形文件相同的域提供的置换贴图图像。 (Firefox是第一个实施即将出台的Filters 1.0规范的安全措施)