svg嵌套svg_SVG过滤器简介

svg嵌套svg

Filters in SVG can be applied in many ways: traditionally, SVG filters are used on vector elements in the same SVG file.  However, the SVG format can also incorporate bitmaps, allowing them to be influenced by filters too. The truly exciting part is the application of SVG filters to HTML content on the page via CSS.

SVG中的过滤器可以通过多种方式应用：传统上，SVG过滤器用于同一SVG文件中的矢量元素。 但是，SVG格式也可以合并位图，从而使位图也受到过滤器的影响。 真正令人兴奋的部分是通过CSS将SVG过滤器应用于页面上的HTML内容。

CSS到底在哪里？ (Where’s CSS In All This?)

Filters also exist as CSS proposals, promoted by the Webkit and Adobe web development teams, which will take at least a few years to reach stability and strong cross-browser support. The filter proposals are translations of their SVG equivalents, so it makes sense for web developers to familiarize themselves with the SVG version, using them in production where appropriate, while applying the CSS version as needed. For maximum browser coverage, you’ll find that this hybrid approach works best: CSS filters for the latest browsers, SVG filters for older versions, and proprietary CSS for IE 5 - 9.

过滤器也作为CSS提议存在，由Webkit和Adobe Web开发团队推动，这至少需要几年的时间才能达到稳定性和强大的跨浏览器支持。 过滤器建议是其SVG等效项的翻译，因此对于Web开发人员来说，熟悉SVG版本是有意义的，可以在生产中适当地使用它们，同时根据需要应用CSS版本。 为了最大程度地覆盖浏览器，您会发现这种混合方法最有效：针对最新浏览器CSS过滤器，针对较旧版本的SVG过滤器以及针对IE 5-9的专有CSS。

Web设计人员最有用的SVG筛选器 (The Most Useful SVG Filters For Web Designers)

The range of possible SVG filters is very large, and the syntax quickly becomes complex: I’ll deal with two of the most useful filters in this introduction.

可能的SVG过滤器范围非常大，语法很快变得复杂：在本简介中，我将介绍两个最有用的过滤器。

模糊 (blur)

<filter id="blur-effect">
	<feGaussianBlurstdDeviation="2" />
</filter>

Very simply, the higher the standard deviation value, the blurrier the result will be for whatever the filter is applied to.

非常简单，标准偏差值越高，无论将滤镜应用于什么，结果的模糊程度都会更高。

去饱和 (desaturate)

<filter id="desaturate">
	<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
			0.3333 0.3333 0.3333 0 0
			0.3333 0.3333 0.3333 0 0
			0 0 0 1 0"/>
</filter>

Applies a matrix transformation to the red, green and blue components of each pixel in an image or element. Very useful for transforming color images into greyscale, sepia-toning photographs, or color-tinting bitmaps.

将矩阵变换应用于图像或元素中每个像素的红色，绿色和蓝色分量。 对于将彩色图像转换为灰度，棕褐色照片或彩色位图非常有用。

The rows in the colorMatrix code refer to red, green, blue and alpha values, with the last row always being a placeholder with the same set of numbers. Each column references red, green, blue, alpha and a constant addition.

colorMatrix代码中的行引用红色，绿色，蓝色和alpha值，最后一行始终是具有相同数字集的占位符。 每列都引用红色，绿色，蓝色，alpha和常数。

Unless you really enjoy matrix transformations, the math invoked in colorMatrix can rapidly become confusing; rather than trying to explain the entire ins-and-outs of the process, I’ll provide some basic “SVG colorMatrix recipes” when I get to the appropriate article.

除非您真的喜欢矩阵转换，否则colorMatrix调用的数学会很快变得令人困惑。 在尝试相应的文章时，我将提供一些基本的“ SVG colorMatrix配方”，而不是试图解释整个过程的colorMatrix 。

There are also JavaScript methods for achieving many of the same results via the <canvas> element. It’s my personal preference to use direct solutions for elements, rather than rasterising them into <canvas>, but it's a valid option.

也有JavaScript方法可通过<canvas>元素获得许多相同的结果。 我个人倾向于使用直接的元素解决方案，而不是将其栅格化为<canvas> ，但这是一个有效的选择。

翻译自: https://thenewcode.com/499/Introduction-to-SVG-Filters

svg嵌套svg