我正在研究 SVG 和滤镜，然后我有一个想法：我们可以将滤镜应用到元素的特定部分吗？
确切地说，看看：My home page
正方形在页面两侧的两个画布上绘制。现在，如您所见，主要内容下方有几个方块。我想让它们模糊一点，这样看起来更好。
我的想法： 仅将 SVG 模糊滤镜应用于主要内容正下方的画布部分。
感谢任何帮助！
【问题讨论】：
<canvas> 元素吗？如果不是，请删除您问题的画布标签。无论如何，之前的评论是对的。
标签： jquery canvas svg svg-filters
filter 属性您可以通过 2D 上下文过滤器属性将一些标准过滤器应用于画布。
ctx.filter = "blur(5px)"过滤器应用于新呈现的内容，而不是现有内容。
ctx.fillRect(10,10,20,10); // not blurred
ctx.filter = "blur (5px)";
ctx.fillRect(10,30,20,10); //blurred but first rect remains unblurred
有一些内置过滤器。这些单位就像 CSS 一样，必须后固定。长度“px”，百分比“%”，度数“deg”
您还可以通过 url 使用 SVG 过滤器。我从未尝试过使用该方法，但假设我将涵盖所有可用的 SVG 过滤器。
当我第一次使用过滤器属性时，它非常慢。但现在我在动画中使用它们，因为性能越来越好。但请务必小心，因为它们尚未达到 CSS 和 SVG 的性能，通常是因为渲染管理技术。
"url(url)" // url points to XML file containing SVG filter,
// can be to anchor in SVG to filter element.
"blur(length)"
"brightness(percentage)"
"contrast(percentage)"
"drop-shadow(offsetX, offsetY, blurRadius, color)"
"grayscale(percentage)"
'hue-rotate(degree)"
"invert(percentage)"
"opacity(percentage)"
"saturate(percentage)"
"sepia(percentage)"
*注意； filter 是实验性的，见 MDN 2D context filter
重新 SVG 过滤器url() 功能。来自 MDN 2017 年 9 月 15 日
- url()。 url() 函数获取指定 SVG 过滤器的 XML 文件的位置，并且可能包含指向特定 过滤元件。
另见HTML Living Standard 4.12.5.1.19 Filters 2017 年 10 月 3 日
【讨论】：
url 指向 svgFilter 元素，而不是文件，即使此过滤器可以嵌入到外部文件中。您可能还想添加过滤器可以组合。
ctx.filter = "url(url)"; 对 MDN 的更新并没有更清晰。我添加了 MDN 引用来澄清我的释义描述。顺便说一句，我们指的是画布 2D 上下文并使用 SVG 过滤器进行渲染。我在编辑中提供了对正确规范的参考。
url(url) 是一个过滤器功能属性，是过滤器功能列表的一部分，必须指向定义 here 的 SVG 过滤器元素。您的链接定义了 CanvasRenderingContext2D#filter 属性，如果您点击那里的链接，您会发现我是对的。而且您在解释本文时忘记了一个重要部分：过滤器属性接受以下一个或多个过滤器函数
您可以使用 feFlood 作为伪剪辑路径来过滤内容的子部分。过滤器窗口由 feFlood 中指定的尺寸定义。
<svg>
<defs>
<filter id="partblur" primitiveUnits="objectBoundingBox">
<feFlood x="0.1" y="0.1" width="0.2" height="0.35"/>
<feComposite operator="in" in="SourceGraphic"/>
<feGaussianBlur stdDeviation="5"/>
<feComposite operator="over" in2="SourceGraphic"/>
</filter>
</defs>
</svg>
【讨论】：