svg 形态 feMorphology
简介
Morphology 被译为 “形态、形态学”。
feMorphology
滤镜用来修改图像的线条感,它可以让图像的轮廓 “增肥” 或者 “细化”。
如果如下几乎没有明显的轮廓,那么这个滤镜效果不大,它适合处理图像中明显的线条部分,简单的比如文字加粗,文字减细等等。
属性
feMorphology
滤镜有 operator
和 radius
两个属性,分别用来设置图形形态模式与变换大小。
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>
效果如下: