云原生应用架构设计与开发实战无mi

Download：​​云原生应用架构设计与开发实战​​

备链：https://www.sisuoit.com/2803.html

SVG 意为可缩放矢量图形，通过 XML 格式定义图像，在 HTML 开发中有广泛的使用。其中 SVG 过滤器可以用来给图形添加一些特殊效果，例如模糊、阴影、色彩转换等等。

滤镜效果将图形操作（例如模糊、照明、颜色转换和扭曲）应用于内容。现在流行的过滤器就两种：

• CSS 过滤器：CSS 的属性filter将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。可应用于任何 HTML 内容。
• SVG 过滤器：可应用于 SVG 内容（以及通过 CSS 过滤器交叉引用的 HTML 内容）的图形效果组合。

SVG 过滤器的扩展性相比 CSS 过滤器要多一些选择。

为什么要使用 SVG 过滤器

运行时效果动画化，可以防止大型图像下载对性能的影响（例如噪声纹理）。与 Canvas 和 CSS 效果相比，SVG 过滤器的优点在于：

• 无需下载大图像即可将纹理添加到 SVG 图形。
• Web 应用程序中嵌入客户端图像编辑功能。
• 为文本添加光照、浮雕和变形效果，无需将文本转换为图像，保持可访问性和可搜索性。

基础布局和基本参数

• ​​defs​​： SVG 允许我们定义以后需要重复使用的图形元素。 可以把所有需要再次使用的引用元素都放在​​defs​​ 元素里。这样做可以增加 SVG 内容的易读性和可访问性。
• ​​filter​​：​​filter​​ 元素作用是作为滤镜操作的容器。过滤器需要有一个​​id​​ 属性，它不能直接呈现。可以利用目标 SVG 元素上的​​filter​​ 属性引用一个滤镜。

<svg>
  <defs>
     <filter id="filter">
       <!-- fe 的各种元素放在这里--> 
    </filter>
  </defs>
  <text class="filtered" x="20" y="140">SVG FONT DEMO</text>
</svg>
复制代码
复制代码
复制代码

那基础框架写完了， 怎么让滤镜和我们的文本做关联呢，我们可以通过 CSS 将文本和 ​​filter​​ 做绑定，这样过滤器的效果就会复用在我们的文本元素中了。

不过这里要多说一嘴，SVG 过滤可用于创建图像特殊效果。过滤器处理光栅图像而不是矢量图形。因此，本文中的所有内容都讨论像素和图像，而不是矢量！

.filtered {
  filter: url(#filter);
}