SVG defs and filter

2022-04-21
svg

在此之前，需要注意的是 SVG 滤镜都会定义在 <defs> 的元素中，而 <fileter> 则是用来定义 SVG 滤镜，本章主要用于来实现 SVG 的阴影，需要使用 <feFlood> 等元素。

<svg width="568" height="568" viewBox="0 0 568 568" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_2_4)">
  <circle cx="285" cy="280" r="198" fill="white"/>
</g>
<defs>
   <filter id="filter0_d_2_4" x="0" y="0" width="1111" height="561118" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
      <feMorphology radius="22" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_2_4"/>
      <feOffset dx="-1" dy="4"/>
      <feGaussianBlur stdDeviation="32"/>
      <feComposite in2="hardAlpha" operator="out"/>
      <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2_4"/>
      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2_4" result="shape"/>
   </filter>
</defs>
</svg>

filter

在 <filter> 元素中爬刨除基础问题，剩下的 “filterUnits”和 “color-interpolation-filter” 属性，其中 filterUnits 主要用于指定或定义 width&height 所使用的坐标系统。

在本章中， filterUnits 主要使用了 userSpaceOnUser，来通过 x,y\width&height 来表示当前系统的坐标中的值或 <filter> 在用户坐标系统中的位置和大小。同时还是用的颜色插值滤镜 color-interpolation-filters 为 “RGB” 颜色。

Id	元素	属性	描述
1	feFlood	flood-opacity	定义不透明度以填充滤镜区域
-	-	result	分配给 BackgroundImageFix 滤镜
2	feColorMatrix	-	基于转换列阵对颜色进行变换，通过类似于 r,g,b,t 都需要通过矩阵算法来得出新的颜色
-	-	type	在默认情况下 feColorMatrix 指明了运算类型，即 Matrix ，表明一个 5x4 的矩阵会被提供其他关键字的方式待避岙允许不执行复杂矩阵运算下的使用常用颜色
	value	在 feColorMatrix 的使用场景下主要用写入颜色的数字列表
3	feMorphology	主要用于扩散其阴影效果
-	-	operator	该属性下的 out 主要表示定义在图形之外的部分，也就是说在外部扩散阴影
4	feOffset	用于阴影，通过 dx,xy 来进行实现
5	feGaussianBlur	stdDeviation	用于模糊阴影
6	feComposite	in2	使得两个属性配合，通过 `<feColorMatrix>` 元素下的 result 属性绑定到本元素，在之后通过 operaator 进行扩展
7	feBlend	mode	使两个对应的对象通过 mode 下的值进行混合

⬅️ Go back