svg 形态 feMorphology


简介

Morphology 被译为 “形态、形态学”。

feMorphology 滤镜用来修改图像的线条感,它可以让图像的轮廓 “增肥” 或者 “细化”。

如果如下几乎没有明显的轮廓,那么这个滤镜效果不大,它适合处理图像中明显的线条部分,简单的比如文字加粗,文字减细等等。

属性

feMorphology 滤镜有 operatorradius 两个属性,分别用来设置图形形态模式与变换大小。

operator

operator 属性用来设置图像轮廓是侵蚀(变薄)还是扩张(变胖),默认值 erode,它有两个值:

operator = "erode | dilate"

erode 对应侵蚀效果,dilate 对应扩张效果。

radius

radius 属性用来设置操作半径。如果设置两个值(用逗号隔开),那么第一个值为 X 轴半径,第二个值为 Y 轴半径,如果仅设置一个值,那么该值会同时作用 X 轴与 Y 轴。默认值为 0。

示例

下面示例依次演示了原图、形态腐蚀和形态扩张三种效果:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="600" viewBox="0 0 10 30">
	<defs>
		<filter id="dilate">
			<feMorphology operator="dilate" radius="0.03"></feMorphology>
		</filter>
		<filter id="erode">
			<feMorphology operator="erode" radius="0.03"></feMorphology>
		</filter>
		<g id="Image">
			<image
				x="1"
				y="1"
				width="9"
				height="9"
				xlink:href="/imgs/test1.jpg"
			></image>
		</g>
	</defs>
	<use xlink:href="#Image"></use>
	<use xlink:href="#Image" transform="translate(0 10)" filter="url(#dilate)"></use>
	<use xlink:href="#Image" transform="translate(0 20)" filter="url(#erode)"></use>
</svg>

效果如下:

参考